CODEWITHSUNDEEP
hoverjquery-cycle
graygilmore
graygilmore

Reputation: 1768

Using jQuery Cycle on Hover Only

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!

Upvotes: 2

Views: 2956

Answers (1)

Diogo Raminhos
Diogo Raminhos

Reputation: 2023

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.

Upvotes: 2

Related Questions