为什么我的jquery在滚动动画时需要这么长时间？

Question

当你滚动10px时我有一个向右滑动100px的盒子，如果滚动小于10px，则滑回到它的默认位置。 这个盒子确实有动画，然而，它有一点延迟。 任何人都可以帮我解决这个问题吗？

HTML

<div id="nest">
  <div id="box">

  </div>
</div>

CSS

#nest {
  width: 95%;
  max-width: 1000px;
  margin: auto;
  background-color: orange;
  height: 1000px;
  padding-top: 150px
}

#box {
  margin: 50px 0px 0px 0px;
  width: 100px;
  height: 100px;
  position:relative;
  background-color: green;
}

jQuery的

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 10) {
    jQuery('#box').animate({left:'100px'})


  } else {
    jQuery('#box').animate({left:'0px'})
}
});

我的JSFIDDLE链接https://jsfiddle.net/ispykenny/m6ffj83g/1/

在此先感谢您的时间和帮助！

Answer 1

动画花费这么长时间的原因是动画在每个超过10px的滚动事件上运行，这在客户端非常密集。 有几个选项，要么在jQuery中试验.stop（）功能，要么编写一个条件if语句来检查动画是否已经启动，只有在没有时才触发。

https://api.jquery.com/stop/

这是一个方便的资源。

var coin = false;

jQuery(window).scroll(function() {
  if (jQuery(this).scrollTop() > 10 && coin === false) {
    jQuery('#box').animate({left:'100px'});
    coin = true;
  } else if (coin === true && jQuery(this).scrollTop() <= 10) {
    jQuery('#box').animate({left:'0px'});
    coin = false;
}
});

尝试这个！