如何在悬停时添加暂停(jquery) [英] how to add pause on hover ( 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列表，并希望在悬停时添加暂停.有什么建议. ?

解决方案

您需要保存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')做到这一点.如果没有，只需将其更改为所需的任何内容即可.

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. ?

解决方案

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.

这篇关于如何在悬停时添加暂停(jquery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！