Cycle hover on mouseout

Question

I was wondering if someone knows how the Cycle plugin works.

jQuery(function($){
    $(".slides").cycle({
        fx:     'fade',
        speed:   450,
        timeout: 5,
        startingSlide: 0,
    }).cycle("pause");

    // Pause & play on hover
    $(".slideshow-block").mouseover(function() {
     $(this).find(".slides").addClass('active').cycle('resume');
    }).mouseout(function(){
    $(this).find(".slides").removeClass('active').cycle('pause');
});

});

Is there a way to restart the “slideshow” by fading to the first image on mouseout (instead of pausing)?

I found this code but it doesn't work for me.

$(this).find('.slides').removeClass('active').cycle('stop').cycle({
    startingSlide: 0
});

Here is my jsfiddle

Thanks in advance for any help with this!

Wet Noodles Wet Noodles · Accepted Answer · 2014-10-22T18:03:48

UPDATE:

Okay, ignore everything below. I found the solution on the FAQ page of the plugin.

The .cycle function can take an integer argument that sets the current slide to the index passed.

$(this).find(".slides").removeClass('active').cycle('pause').cycle(0);

http://jsfiddle.net/WetNoodles/Ly0jxgz6/7/

It doesn't look like it's officially supported, however you can rebuild the cycle plugin in your mouse out event. (Also, I changed mouseout to mouseleave - it seemed to have more reliable results)

.mouseleave(function () {
    $(this).find(".slides").removeClass('active').cycle('pause');
    buildCycle();
});

http://jsfiddle.net/Ly0jxgz6/2/

As an extra note, you can figure out which slide is currently being shown by jQuery's data function.

var currSlide = $('.slides').data('cycle.opts').currSlide

You could then use the 'prev' command to page to the first slide, but it looks like if you do that, the transition animation will be run for each one.

Cycle hover on mouseout

1 Answers