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?