1
\$\begingroup\$

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?

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ 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. \$\endgroup\$
    – user110857
    Feb 28, 2012 at 0:16
  • \$\begingroup\$ 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? \$\endgroup\$ Feb 28, 2012 at 0:46
  • \$\begingroup\$ 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. \$\endgroup\$
    – user110857
    Feb 28, 2012 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.