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().fadeI开发者_C百科n(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. ?

---

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.