停止传播不按预期工作。 jQuery

Question

我有一些 jquery 代码，当滚动位置不等于 0 时隐藏 div。这很有效，但是每当我在页面顶部快速上下滚动，或使用转到页面顶部链接时，事件似乎冒泡，使 div 出现并重新出现几次......有没有办法让它出现或消失并且从不按顺序堆叠事件？

我尝试了 stoppropogation()，但这似乎不起作用。也许我执行不正确。

    $(window).scroll(
        {
            previousTop: 0
        }, 
        function () {
        var currentTop = $(window).scrollTop();
        if (currentTop == 0) {
            $("#binding-info").fadeIn('slow');
        } else {
            $("#binding-info").fadeOut('slow');
        }
        this.previousTop = currentTop;
    });

Answer 1

那是因为 jQuery 队列动画和 fadeIn/fadeOut 是动画。基本上，jQuery 注册下一个应该是什么动画，并在当前动画完成时执行。

要阻止这种情况，您可以在为对象设置动画之前使用.stop()。

if (currentTop == 0) {
    $("#binding-info").stop().fadeIn('slow');
} else {
    $("#binding-info").stop().fadeOut('slow');
}

但是fadeIn 有问题。如果您在达到 1 不透明度之前执行 fadeOut，它将保留在数据中，并且不会再次将 fadeIn 变为 1。

热修复是使用fadeTo():

$("#binding-info").stop().fadeTo('slow', 1);