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

【问题标题】：jQuery: animate() method with delay issue on scroll functionjQuery：animate() 方法在滚动功能上有延迟问题
【发布时间】：2017-06-01 14:47:29
【问题描述】：

我正在尝试根据窗口滚动使用 jQuery 为该菜单的高度设置动画。向下滚动时它工作正常，但向上滚动时动画有延迟，我不明白。代码：

$(window).scroll(function() {

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

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

【问题讨论】：

在你滚动的那一刻，它会触发 animate 函数乘法倍数，我认为这是问题的很大一部分。添加一个标志或某种可以检查的类以防止这种情况发生。

标签： jquery scroll jquery-animate

【解决方案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() 方法可以防止动画被多次触发

【讨论】：