javascript - scrollTop 函数的 jQuery 延迟

Question

当用户滚动到 html 的顶部时，我试图用 .animate block 隐藏，问题是当我到达顶部时制作动画需要 5 秒，我希望动画立即触发，有人知道怎么做吗？

// On scroll to top hide block 'Welcome'
$(document).scroll(function () {
    if ($(window).scrollTop() === 0) {
        $("div#welcome_slide").animate({ "top": "0" }, 500);
    }
});

Answer 1

为时已晚，但无论如何这是我的答案。

.scroll() 在用户滚动时被触发多次。因此你的动画被触发了很多次。这些动画排队 - 因此在隐藏时造成长时间延迟(它一直等到队列末尾)。

您可以使用 .stop() 强制队列结束在每次调用之前中止动画，或者您可以设置一个标志来测试幻灯片是否显示并仅相应地设置动画:

$(window).scroll(function () {

    // On scroll show block 'Welcome'
    if ($(this).scrollTop() >= 100 && !$(this).data('revealed')) {
        $("#slide").stop().animate({ "top": "100px" }, 1000);
        $(this).data('revealed',true);
        return false;
    }

    // On scroll to top hide block 'Welcome'
    if ($(this).scrollTop() === 0) {
        $("#slide").stop().animate({ "top": "480px" }, 500);            
        $(this).removeData("revealed");
        return false;
    }
});

http://jsfiddle.net/574arm1w/3/