在做网页时,当我希望在我滑动网页到一定的高度时从上出现一个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)