如何在悬停时添加暂停(jquery)

时间:2011-05-18 04:41:43

标签: jquery

以下是代码:

   $(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);    
}); 

这适用于ul列表,并希望在悬停时添加暂停。有什么建议。 ?

1 个答案:

答案 0 :(得分:6)

您需要保存setInterval返回的对象,然后您可以将其传递给clearInterval以阻止它再次发生。

以下是一些示例代码,可以为您提供类似于以下内容的代码:

$(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);
    });
}); 

请注意,我不清楚究竟用户是什么来停止间隔,所以我假设您希望$('#testimonials .slide')这样做。如果没有,只需将该部分更改为您需要的任何部分。