Question

我创建了这个脚本，用于向上滚动jQuery，但是当你多次鼠标悬停和鼠标移动时，脚本会进入循环，直到每次你鼠标悬停它为止。

我已经尝试过搜索解决方案，但我没有对其进行整理，这里是代码：

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).slideUp('900');    
    }); 
});

Answer 1

尝试使用.stop()，注意传递true作为两个args，它清除队列（阅读文档以获取更多信息）并跳转到最后。如果你没有传递真实作为args动画将排队并执行，所以你将面临与你现在面对的相同的行为

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).stop(true,true).slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).slideUp('900');    
    }); 
});

Answer 2

您需要在每个动画（slideUp和slideDown）之前添加stop()。这个小函数在向动画队列添加新动画之前停止动画！

Answer 3

在每个动画之前添加stop()，这会清除动画队列。 http://api.jquery.com/stop/

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).stop().slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).stop().slideUp('900');    
    }); 
});

Answer 4

.stop()将有助于纸张，但动画仍然看起来不稳定。你真正想要的是延迟悬停事件，以便在用户实际“悬停”在你的.work元素上时触发动画。有一些jQuery插件。试试hoverIntent - sample。或者你可以写自己的，这也不是很难。

此外，FYI 900几乎是一整秒 - 这比礼貌动画应该更长。

防止循环jQuery

4 个答案: