CODEWITHSUNDEEP
jqueryscrolljquery-animate
glassraven
glassraven

Reputation: 323

jQuery: animate() method with delay issue on scroll function

I'm trying to animate the height of this menu with jQuery according to the window scroll. On scroll down it works fine, but when scrolling up there's a delay in the animation that I don't understand. The code:

$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('.menu').animate({height:'40px'});
     }
    else
     {
      $('.menu').animate({height:'100px'});
     }
 });

Besides, if I use the methods fadeOut() and fadeIn(), the code works fine. Why?

Upvotes: 1

Views: 859

Answers (1)

glassraven
glassraven

Reputation: 323

Based on the hint of @drip, I managed to reach this solution:

$(window).scroll(function () {
    var top = $(window).scrollTop();

    if (top > 0) {

        $(".menu").stop().animate({height: '50px'}, 100);
    } else {

        $(".menu").stop().animate({height: '100px'}, 100);
    }
})

The stop() method keeps the animation from being triggered several times

Upvotes: 1

Related Questions