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

【问题标题】：Why does my jquery take so long when animating on scroll?为什么我的 jquery 在滚动动画时需要这么长时间？
【发布时间】：2016-09-15 00:37:28
【问题描述】：

当您滚动 10 像素时，我有一个向右滑动 100 像素的框，如果滚动小于 10 像素，则滑回默认位置。盒子确实有动画，但是，它有一点延迟。谁能帮我解决这个问题？

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/

提前感谢您的时间和帮助！

【问题讨论】：

.scrollTop() 设置滚动顶部。要获取它，请使用不带括号的.scrollTop
因为滚动事件处理程序被触发了很多次，并且每次它都会将一个新动画放入队列中。使用超时去抖动滚动事件可能是一种解决方法或出列 fx 队列jsfiddle.net/m6ffj83g/2
尝试在滚动事件上添加一个设置超时，否则它会检查每 1px 滚动
感谢大家的帮助！
这是一个完美的去抖场景：去抖可以像 setTimeout/clearTimeout 一样简单。这是一个使用标志（而不是 clearTimeout）的类似问题：stackoverflow.com/questions/20141933/debounce-mouse-wheel

标签： javascript jquery html css

【解决方案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;
}
});

试试这个！

【讨论】：

并且每个 animate() 调用默认持续 400 毫秒。