Javascript 如何修复以下js，以便在滚动时动画中不会出现任何波动效果

这种情况我如何修复它来解决它，并获得平滑过渡

样式Css来处理上述错误。bug1、.bug2、.bug3、.bug4、.bug5、.bug6、.bug7{位置：已修复；顶部：50%；左侧：50%；}您能给我们一个实时链接来查看效果吗？或者可能是一个JSFIDLE？您已经绑定了两个

scroll

事件处理程序。在第一个

event

处理程序中，您正在检查条件

if（$（窗口）.scrollTop（）>0&$（窗口）.scrollTop（）720）{

它有一个else语句。我猜两个事件处理程序同时触发并修改DOM，这就是为什么会出现闪烁。将这两个事件处理程序放在一个事件处理程序中，并使用

if，else-if，else

条件。另一个选项是使用

window.requestAnimationFrame

优化动画我在这里看到了效果

$(window).bind('scroll', function() {
  if ($(window).scrollTop() >0 && $(window).scrollTop() <720) {
    $('.terminator-text').animate({left: '50%',top:'50%',opacity:'1'});
    $('.bug1').animate({ left: '14%' ,top:'16%',opacity:'1'});
    $('.bug2').animate({ left: '73%',top:'20%',opacity:'1'});
    $('.bug3').animate({ left: '21%',top:'70%',opacity:'1'});
    $('.bug4').animate({ left: '65%',top:'46%',opacity:'1'});
    $('.bug5').animate({ left: '17%',top:'40%',opacity:'1'});
    $('.bug6').animate({ left: '53%',top:'69%',opacity:'1'});
    $('.bug7').animate({ left: '58%',top:'52%',opacity:'1'});
  }
  else {
    $('.terminator-text').animate({left: '50%',top:'50%',opacity:'0'});
    $('.bug1').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug2').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug3').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug4').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug5').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug6').animate({ left: '50%',top:'50%',opacity:'0'});
    $('.bug7').animate({ left: '50%',top:'50%',opacity:'0'});
   }
});

$(window).bind('scroll', function() {
  if ($(window).scrollTop() >720 ) {
    $('.bug1').animate({ left: '5%' ,top:'8%',opacity:'1'});
    $('.bug2').animate({ left: '80%',top:'10%',opacity:'1'});
    $('.bug3').animate({ left: '12%',top:'78%',opacity:'1'});
    $('.bug4').animate({ left: '77%',top:'48%',opacity:'1'});
    $('.bug5').animate({ left: '5%',top:'53%',opacity:'1'});
    $('.bug6').animate({ left: '58%',top:'77%',opacity:'1'});
    $('.bug7').animate({ left: '68%',top:'59%',opacity:'1'});
  }
  else {
    $('.terminator-text').animate({left: '50%',top:'50%',opacity:'1'});
    $('.bug1').animate({ left: '14%' ,top:'16%',opacity:'1'});
    $('.bug2').animate({ left: '73%',top:'20%',opacity:'1'});
    $('.bug3').animate({ left: '21%',top:'70%',opacity:'1'});
    $('.bug4').animate({ left: '65%',top:'46%',opacity:'1'});
    $('.bug5').animate({ left: '17%',top:'40%',opacity:'1'});
    $('.bug6').animate({ left: '53%',top:'69%',opacity:'1'});
    $('.bug7').animate({ left: '58%',top:'52%',opacity:'1'});
  }
});

if ($(window).scrollTop() >720