学会用jQuery停止动画：详解stop(true)的正确使用方法

在jQuery中，stop() 方法是一个非常实用的功能，它允许开发者停止正在执行的动画。而 stop(true) 是 stop() 方法的一个变体，它具有一些独特的用途。本文将详细介绍 stop(true) 的正确使用方法，并辅以实例说明。

基本用法

stop() 方法的基本用法如下：

$(selector).stop([clearQueue],[gotoEnd]);

其中，clearQueue 和 gotoEnd 是可选参数。当 clearQueue 设置为 true 时，它会清除动画队列中当前动画之后的所有动画；当 gotoEnd 设置为 true 时，它会将动画跳转到队列中下一个动画开始之前的状态。

对于 stop(true)，它实际上等同于 stop(true, true)。这意味着它会清除动画队列中当前动画之后的所有动画，并将动画跳转到队列中下一个动画开始之前的状态。

假设你有一个按钮，点击按钮后，页面上的一个元素会执行两个动画：先向右移动，然后向上移动。但是，如果用户连续点击按钮，可能会导致动画重叠，看起来不太自然。使用 stop(true) 可以解决这个问题：

$('#moveButton').click(function() { $('#element').stop(true).animate({ left: '+=100px' }, 1000).animate({ top: '-=100px' }, 1000); });

在这个例子中，每次点击按钮时，都会先停止当前正在执行的动画，然后开始新的动画序列。

在某些情况下，你可能需要确保一个动画完成后再执行其他操作。使用 stop(true) 可以帮助你实现这一点：

$('#element').animate({ left: '+=100px' }, 1000, function() { // 动画完成后的操作 $('#element').css('border', '2px solid red'); });

在这个例子中，动画完成后，会执行一个回调函数，将元素的边框设置为红色。

使用 stop(true) 可能会导致动画效果不太自然，因为它会立即跳转到下一个动画开始之前的状态。在使用时，请根据实际情况进行判断。
如果动画执行过程中发生了错误，可能会导致 stop(true) 无法正常工作。在这种情况下，你可以尝试使用 stop(false) 来停止动画，并手动处理错误。