jQuery stop()

jQuery 停止动画

jQuery 的 .stop() 方法用于在选定的元素上停止当前正在运行的动画或效果，使其在自然完成之前停止。

这对于创建更具响应性的界面很有用，例如，当用户再次与元素交互时停止动画。

考虑一个向下滑动的面板。如果用户快速多次点击滑动按钮，动画可能会排队，导致意想不到的行为。在开始新动画之前使用 .stop() 可以防止这种情况。

示例 HTML 结构（供参考）：

<button id="startSlide">Start Sliding</button>
<button id="stopSlide">Stop Sliding</button>
<div id="panel" style="display: none; background: lightblue; padding: 20px;">Content to slide</div>

jQuery 示例：

$(document).ready(function() {
  $('#startSlide').click(function() {
    // Stop potentially existing animation first, then start new one
    $('#panel').stop().slideDown(2000);
  });

  $('#stopSlide').click(function() {
    $('#panel').stop();
  });
});

jQuery `.stop()` 方法解释

.stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出以及使用 .animate() 创建的自定义动画。

语法：

$(selector).stop(clearQueue, jumpToEnd);

参数：

clearQueue（可选布尔值，默认值：false）：指定是否清除元素的动画队列。如果为 false，则只停止当前正在进行的动画，队列中的任何后续动画仍将运行。如果为 true，则停止当前动画并清除队列中的其余动画。
jumpToEnd（可选布尔值，默认值：false）：指定是否立即完成当前动画。如果为 true，元素的状态将跳到当前动画结束时的状态。如果为 false，动画将在当前状态突然停止。

默认情况下，调用 .stop()（不带参数）只会停止选定元素的当前动画，保持队列不变，并在动画中间状态停止。

常用用法：

// Stop the current animation immediately, clear the queue
$('#myElement').stop(true);

// Stop the current animation, clear the queue, and jump to the end state
$('#myElement').stop(true, true);

虽然 jQuery 动画功能强大，但现代 Web 开发通常利用 CSS Transitions 和 Animations 来提高性能并实现关注点分离。然而，对于控制由 jQuery 驱动的动画来说，.stop() 仍然至关重要。

进一步学习

要全面了解所有 jQuery 效果，请参阅官方的 jQuery API 文档中关于 Effects 的部分。

jQuery stop()

jQuery 停止动画

jQuery .stop() 方法解释

进一步学习

jQuery `.stop()` 方法解释