Question

当用户滚动到html的顶部时，我正试图用.animate块隐藏，事情就是当我到达顶部时需要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/

Answer 2

我已更新您的fiddle

请检查这是否是您尝试实现的目标。

更新代码

    var  animating = false;    
    $(window).scroll(function () {
        var divTop = Number($('#slide').css('top').replace('px',''));
        if ($(this).scrollTop() >= 100 && !animating && divTop > 100) {
            // On scroll show block 'Welcome'
            animating = true;
            $("#slide").animate({ "top": 100+"px" }, 1000,function(){
            animating = false;
            });
            return false;
        }
        else if ($(this).scrollTop() == 0 && !animating && divTop < 480) {
                // On scroll to top hide block 'Welcome'
            console.log('0');
            animating = true;
            $("#slide").animate({ "top": 480+"px" }, 500,function(){
            animating = false;
            });
           return false;
        }        
    });

Answer 3

您可以在jquery中使用.delay

$("div#welcome_slide").delay(1000).animate({ "top": "0" }, 500);

或setTimeout

setTimeout((function() {
   $("div#welcome_slide").animate({top: 0} ,{duration:500});
}), 1000);

Answer 4

试试这个代码。我认为这是你的要求。

$(document).scroll(function () {    
if ($(window).scrollTop() === 0) {    
    $("div#welcome_slide").slideUp(500);    
    }
})

关于scrollTop函数的jQuery延迟

4 个答案: