jQuery在scrollTop函数上的延迟

Question

I'm trying to hide with an .animate a block when the user scroll to the top on the html, the thing is that when I got to the top it takes like 5sec to make the animation, I want the animation to trigger immediately, someone know how please?

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

Answer 1

Too late but here's my answer anyway.

.scroll() is triggered MANY times whilst the user is scrolling. Therefore your animation is getting triggered LOTS of times. These animations are queued up - hence causing the long delay when hiding (its waiting till the end of the queue).

You can force the queue to end using .stop() to abort the animation before each call OR you can set a flag to test if the slide is revealed and only animate it accordingly:

$(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

I have updated your fiddle

Please check if this is what you're trying to achieve.

UPDATED CODE

    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

You can use .delay in jquery

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

or setTimeout

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

Answer 4

Try this code.I think this is your requirement.

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