欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决animate动画效果抖动

程序员文章站 2022-03-16 18:59:16
...

最近在做一个后台监控的项目,需要实现数据可视化。在做的过程中需要让监控日期列表随页面滚动,用到了jquery的animate方法。

解决animate动画抖动

在执行animate函数前,需要先用stop()清空上一次的animate方法,防止方法重复执行

    // 日期滚动动画
    $(window).scroll(function(){
      if($("#date").offset().top - $(document).scrollTop() < 0){
           let pos = $(document).scrollTop()
           $("#date").stop().animate({top: pos+"px"}, "fast");
      }else if($(window).height()-[$("#date").offset().top - $(document).scrollTop()]-$("#date").height() < 0){
           let pos = $(document).scrollTop()
           $("#date").stop().animate({top: pos+"px"}, "fast");
       }
    })
相关标签: animate 抖动