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.

• user1108579: Good call on dropping InitializeCycle(). Unfortunately, the "flash" issue appears to persist with this code. Although, I did find that using the fastOnEvent option from the example you linked was able to achieve the desired effect! Thanks for the compliment on the design, also. I work with a team that has some talented graphic people.
• hardyharzen: If there is a "flash issue", you must be doing something wrong. I have this thing running here just fine. Describe the issue a little more -- it's not the same as it was initially, or is it?
• user1108579: Yeah, I would say the effect that your code generated closely resembled the original solution. Upon hovering out of a navigational item during a transition of the slider, the opacity would abruptly change to 0 for both elements, and would appear to flash. You can review the newly implemented solution at pcsn.nnja.co. I highly recommend analyzing the markup on the homepage there. I feel it's worthy of mention that I am modifying several different sliders (.shuffle) simultaneously with this solution, with the intention of having them sync, of course.