javascript - 为什么我的 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

您的动画花费这么长时间的原因是动画在超过 10 像素的每个滚动事件上运行，这在客户端非常密集。有几个选项，要么试验 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;
}
});

试试这个!