当我们使用jQuery的.animate()方法来制作网站的动画效果时，有时候用户会在动画执行期间手动滚动页面。这种情况下，动画可能会变得不稳定或者失去控制。为了解决这个问题，我们需要停止动画的滚动，并让它重新开始当用户停止滚动。
如何停止.animate()在滚动过程中？
我们可以使用.stop()方法来停止$(document)上的所有动画，但是这可能会导致意外的结果，因为我们不仅要停止当前的动画，还要让它重新开始当用户停止滚动。
所以，我们需要使用一个标志来检测用户是否正在滚动页面。我们可以使用scroll()事件来检测用户是否正在滚动页面，并设置一个布尔值来表示页面是否正在滚动：
var isScrolling = false;
$(window).scroll(function() {
isScrolling = true;
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
isScrolling = false;
}, 250));
});这段代码将在用户滚动页面时设置isScrolling标志为true，并将其设置回false，以指示用户已经停止滚动页面。注意，使用setTimeout()函数来在用户停止滚动250毫秒后重置isScrolling标志。
接下来，我们可以使用.stop()方法来停止当前的.animate()动画。在.animate()方法中添加回调函数，在该函数中检查isScrolling标志是否为true，如果是，则重新开始动画，否则停止动画：
-- -------------------- ---- -------
---------------------------- -
--- ----------- - ------
--------------------------- -
----------- - -----
------------------------- ----------------
------------ -------------- --------------------- -
----------- - ------
-- ------
---
-------------------
----- -------
-- -
--------- -----
------- --------
--------- ---------- -
-- ------------- -
-------------------- ------
--------------------- -------
-------------------
----- -------
-- ----- ---------
-
-
---
---这段代码将在#box元素上设置一个简单的.animate()动画，当用户滚动页面时，会检查isScrolling标志，如果为true，则使用.stop()方法停止当前动画，并重新开始。我们还需要将#box元素的left属性重置为0，以确保它从正确的位置开始重新开始动画。
总结
通过使用.stop()方法和scroll()事件，我们可以使我们网站的动画效果更加稳定和可靠。怎样停止.animate()在滚动过程中，这篇文章为您提供了详细的指导和示例代码，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26405