Here it is at work: pcsn.nnja.coAs 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?
jQuery cycle slider
javascript;jquery
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.   