jQuery: animate() 方法在滚动功能上有延迟问题

Question

我正在尝试根据 window 滚动条使用 jQuery 为该菜单的高度设置动画。向下滚动时效果很好，但向上滚动时动画会出现延迟，我不明白。代码：

$(window).scroll(function() {

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

此外，如果我使用方法 fadeOut() 和 fadeIn()，代码工作正常。为什么？

Answer 1

根据@drip的提示，我得到了这个解决方案：

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

    if (top > 0) {

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

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

stop()方法让动画不被多次触发

jQuery: animate() 方法在滚动功能上有延迟问题

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

jquery

scroll

jquery-animate