自我感觉jQuery中animate延迟

image.png

在做网页时，当我希望在我滑动网页到一定的高度时从上出现一个div，而我往上滑动页面时这个div就会消失，效果是希望可以从上到下慢慢显示。这个时候我选择用jQuery的animate()方法。
但是问题出现了：每一次都是往上拉到顶部了div还是不消失，好不容易消失了再往下拉到底部div都不出现；代码如下

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop()
    if (scrollTop > 160) {
        $('.navbar').animate({ height: "80px" },500)
    } else {
        $('.navbar').animate({ height: "0px" },500)
    }
})

最后找到原因是因为

鼠标滚动一次就引发一次animate()方法的执行，而每次执行是需要时间的，对于我的代码是一次执行0.5s，虽然一次时间不长，但是好多好多次叠加在一起就造成了执行不同animate()方法的延时

解决方法

在animate()方法之前添加stop()函数

$('.navbar').stop().animate({ height: "80px" },500)