Using jQuery Cycle on Hover Only

Question

I'm trying to get jQuery Cycle to only run when the slideshow is being hovered (which is the opposite of the functionality that they have built in).

Here's where I'm at: http://jsfiddle.net/zSBMU/

$(document).ready(function() {

$('.slideshow').hover(
    function() {
        $(this).cycle({
            fx:     'fade',
            speed:   600,
            timeout: 300,
            pause:   0
        });
    },
    function(){
        $(this).cycle('stop');
    }
).trigger('hover');

});

The first time you hover, it's great, works fine. But if you try to hover the same one again, it only goes through one fade instead of looping through again.

Any ideas?

Please ignore some of the gross code, working with a pretty old theme here, trying to clean it up!

Please post code here also. It's about helping you now and someone else 2 years from now...after your fiddle is gone. — Jonathan M, Apr 17 '12 at 21:09

Diogo Raminhos · Accepted Answer · 2012-04-17T21:51:56.800

2

You're using "stop" and recreating the cycle, so you're adding several cycles on the object.

You've to use "pause" and "resume".

Example bellow:

var cycleConfigured = false;
$(document).ready(function() {

    $('.slideshow').hover(
        function() {
            if(cycleConfigured)
                $(this).cycle('resume');
            else
            {
                $(this).cycle({
                    fx:     'fade',
                    speed:   600,
                    timeout: 300,
                    pause:   0
                });
                cycleConfigured = true;
            }
        },
        function(){
            $(this).cycle('pause');
        }
    ).trigger('hover');

});

The variable cycleConfigured will be used to control our cycle plugin, to check if it was already instantiated. In alternative you can create it on $(document).ready() and then pause it like this:

$(document).ready(function() {
    // configure the cycle plugin
    $('.slideshow').cycle({
         fx:     'fade',
         speed:   600,
         timeout: 300,
         pause:   0
    });
    $('.slideshow').cycle('pause'); // pause it right away.

    $('.slideshow').hover(
        function() {
                $(this).cycle('resume'); // start playing.
        },
        function(){
            $(this).cycle('pause'); // pause the slideshow.
        }
    ).trigger('hover');

});

Then everything you need to do is use $(this).cycle('pause') on out and $(this).cycle('resume') on over.

Anything let me know.

edited Apr 17 '12 at 21:51

answered Apr 17 '12 at 21:46

Diogo Raminhos

2,023
16
24

The only question I have is if I have multiple slideshows on one page, I'm not sure if there is going to be a conflict here? – graygilmore Apr 17 '12 at 22:14
You're Welsome :) If you configure them all on `$(document).ready()` there will not be any problem, now the problem will be the "resource" usage, cycle will add some elements to the dom. The only **"solution"** would be to kill cycle and reset it, but then you would not have the animation you're looking for. How many cycles and images are you expecting to use? – Diogo Raminhos Apr 17 '12 at 22:18
In theory, there could be up to 12 on a page. There are 12 'boxes' but not all of them might have multiple photos. Any boxes that do have multiple images will be wrapped in the 'slideshow' class. – graygilmore Apr 17 '12 at 22:49
The alternative code should work then, and it should work fine, anything let me know :) – Diogo Raminhos Apr 17 '12 at 22:54
Cheers, I will give it a go and report back! – graygilmore Apr 18 '12 at 00:05
Sorry - totally forgot to come back to this! The alternative solution worked perfectly for multiple slideshows on a single page. – graygilmore May 16 '12 at 18:02

Using jQuery Cycle on Hover Only

1 Answers1