美文网首页
自我感觉jQuery中animate延迟

自我感觉jQuery中animate延迟

作者: DX初学者 | 来源:发表于2017-11-10 11:20 被阅读486次
    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)
    

    相关文章

      网友评论

          本文标题:自我感觉jQuery中animate延迟

          本文链接:https://www.haomeiwen.com/subject/irfbmxtx.html