CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

how to add pause on hover ( jquery )

Here is the code:

   $(document).ready(function(){
    $('#testimonials .slide');
    setInterval(function(){
        $('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
            if($(this).next('li.slide').size()){
                $(this).next().fadeIn(2000);
            }
            else{
                $('#testimonials .slide').eq(0).fadeIn(2000);
            }
        });
    },1000);    
});

This applies to a ul list , and would like to add pause on hover. Any suggestions. ?

Upvotes: 2

Views: 5006

Answers (1)

Luke Sneeringer
Luke Sneeringer

Reputation: 9428

You need to save the object that is returned by setInterval, and then you can pass it to clearInterval to stop it from occurring again.

Here is some sample code that should get you something like what you are after:

$(document).ready(function(){
    var slider = function() {
        $('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
            if($(this).next('li.slide').size()){
                $(this).next().fadeIn(2000);
            }
            else{
                $('#testimonials .slide').eq(0).fadeIn(2000);
            }
        });
    };

    // save an object so that I can start and stop this as we go
    var interval = setInterval(slider, 1000);

    // when the user hovers in, clear the interval; if they hover out,
    // restart it again
    $('#testimonials .slide').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval(slider, 1000);
    });
});

Note that it's not clear to me what exactly the user hovers over to get the interval to stop, so I assumed you wanted $('#testimonials .slide') to do that. If not, just change that part to whatever you need.

Upvotes: 6

Related Questions