CODEWITHSUNDEEP
javascriptjquerycss
novoa
novoa

Reputation: 125

jQuery delay on scrollTop function

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);
    }
});

Upvotes: 0

Views: 12870

Answers (4)

Moob
Moob

Reputation: 16184

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/

Upvotes: 3

qtgye
qtgye

Reputation: 3610

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;
        }        
    });

Upvotes: 1

vineethbc
vineethbc

Reputation: 900

Try this code.I think this is your requirement.

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

Upvotes: -1

Farshad
Farshad

Reputation: 1485

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);

Upvotes: 0

Related Questions