阻止 jQuery 做它的事情？答案

【问题标题】：Stopping jQuery from doing its thing?阻止 jQuery 做它的事情？
【发布时间】：2011-12-10 15:01:17
【问题描述】：

我有这个代码。

$(document).ready(function() {
$('#box').hide();
$(window).bind('scroll', function(){
    if($(this).scrollTop() > 200) {
        $("#box").fadeIn(300);
    }
    else {
    $("#box").fadeOut(300);
    }
});
});

所以当我向下滚动 200 像素时，它会出现一个 div。当我向上滚动时，它会消失。这很好，直到我经常这样做。

如果我像疯子一样上下滚动，即使我停下来，div 也会不断地淡入淡出。这与这个实例无关，它在过去发生了很多，我一直想知道如何解决它（通过让它尽快停止，而不是每次我向上和向下滚动时都这样做)。

这可能吗？

【问题讨论】：

是的，好问题。我自己也想知道。

标签： jquery function iteration fade

【解决方案1】：

jQuery 有一个 stop() 方法 - http://api.jquery.com/stop/

这篇文章描述了如何使用它，似乎正是您正在寻找的： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

【讨论】：

它可以工作一段时间，但无论我在哪里停止，它似乎都很容易坏掉——最终它会完全停止淡入或淡出。

【解决方案2】：

使用stop^docs 函数

您只需分别致电$('#box').stop(true,true).fadeIn(300); 和$('#box').stop(true,true).fadeOut(300);

【讨论】：

【解决方案3】：

您必须像这样在队列中添加停止功能： $('#box').stop(true).fadeOut(300);

函数 stop() 说明：see here

【讨论】：

【解决方案4】：

在更多动画排队之前尝试使用 stop()：

$(document).ready(function() {
    $('#box').hide();
    $(window).bind('scroll', function(){
        if($(this).scrollTop() > 200) {
            $("#box").stop().fadeIn(300);
        }
        else {
            $("#box").stop().fadeOut(300);
        }
    });
});

在此处查看文档：http://api.jquery.com/stop/

【讨论】：

【解决方案5】：

.clearQueue() 比 .stop() 效果更好

【讨论】：