自我感觉jQuery中animate延迟

2017-11-10  本文已影响486人  DX初学者
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)
上一篇下一篇

猜你喜欢

热点阅读