jQuery cycle slider

Question

Here it is at work: pcsn.nnja.co

As you can see, while the slider .shuffle works and is adjusting itself as it was intended to when the corresponding navigational item #menu-main-navigation li a is hovered upon, the effect is a bit erratic with abrupt mouse behavior.

My jQuery is located in the head:

$(document).ready(function() {

    function initializeCycle(){

        $('.shuffle').cycle({ // Slider element

            timeout: 6000, // Change slide every 6 seconds
            speed: 1000, // Transition should last 1 second
            fx: 'fade',
            allowPagerClickBubble: true, // Allow navigation to remain clickable
            pager: '#menu-main-navigation', // Navigation element
            pauseOnPagerHover: true,
            pagerEvent: 'mouseover',
            pagerAnchorBuilder: function(idx, slide) {
                // This selects existing anchors within main nav items
                // and sets them as the pager children
                return '#menu-main-navigation li:eq(' + (idx) + ') a';
            }
        });
    };

    initializeCycle();

});

How would I improve this? I have a solution that works, but it's sloppy.

Ideally, cycle's speed option would asynchronously adjust to zero upon hovering over navigational items, so that the fade effect on the transitions of the slider are instant and the erratic behavior is prevented.

This is my unfinished logic to do this:

$("#menu-main-navigation").bind("mouseenter mouseleave", function(event){

    // Set the 'speed' option in cycle to 0 when an item
    // in the main navigation is hovered upon so that it
    // 'snaps' in its transition rather than fades

});

Am I going in the right direction?

Answer 1

A cursory glance at the plugin's documentation yielded this example, which seems close to what you're aiming for. Alas, no fade...

Anyway, I tinkered a little with it, and this works. It's not elegant, but that's mostly the plugin's fault...

$(function() { 

  $('#slideshow').cycle({ 
      fx:     'fade', 
      speed:  1000, 
      timeout: 6000,          
      pager: '#nav',
      pagerEvent: 'mouseover'        
  });

  // retrieve plugin data (i.e. the speed params)
  var data = $('#slideshow').data('cycle.opts');

  // bind navigation mouseenter to increased speed and vice versa
  $('#nav').bind('mouseenter mouseleave', function(e) {
    if (e.type == 'mouseenter') {      
      data.speedIn = 100;      
      data.speedOut = 100;      
    } 
    else {      
      data.speedIn = 1000;
      data.speedOut = 1000;
    }
  });

});

Also, lose the "InitializeCycle()", right now it's just a useless wrap. Maybe consider using a different plugin altogether. Oh, and one more thing: nice page design!

PS: It's better to put the scripts at the end of the document.