jQuery 停止动画

jQuery 效果默认会排队执行：快速连续点击按钮时，动画会一个一个接着播完，页面看起来很"迟钝"。stop() 方法可以随时中止当前动画、清空队列，让交互立即响应。

stop() 语法

$(selector).stop(stopAll, goToEnd)

两个参数都是可选的布尔值：

参数取值作用
stopAll默认 false是否同时清除后面的动画队列
goToEnd默认 false是否立刻跳到当前动画的最终状态

不带参数的情况

stop() 最常用的用法是不传参数，它会停止当前正在播放的动画，但保留后面的排队动画：

$('#panel').stop();            // 停止当前动画，队列仍会继续执行
$('#panel').stop(true);        // 停止并清空全部队列
$('#panel').stop(true, true);  // 清空队列并直接跳到最终效果

典型问题：悬停闪烁

如果不加 stop()，鼠标在元素上快速进出时，淡入淡出会反复排队，元素半天停不下来。加上 stop() 立即解决：

// 错误示范：快速进出时动画堆积、闪烁不停
$('#box').hover(function () { $(this).fadeIn(); },
                function () { $(this).fadeOut(); });

// 正确写法：先 stop 再播放下一个动画
$('#box').hover(function () { $(this).stop().fadeIn(); },
                function () { $(this).stop().fadeOut(); });

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 引入 jQuery（https://example.com 为占位地址，实际使用时请替换为真实 CDN 或本地文件） -->
<script src="https://example.com/jquery.min.js"></script>
<style>
#box { position: relative; width: 100px; height: 100px; background: #7cc7ff; }
</style>
</head>
<body>
<button id="start">开始动画</button>
<button id="stop">停止动画</button>
<div id="box"></div>

<script>
$(function () {
    // 连续播放三段动画：右移、下移、变矮
    $('#start').click(function () {
        $('#box').animate({ left: '+=150px' }, 2000)
                 .animate({ top: '+=150px' }, 2000)
                 .animate({ height: '50px' }, 2000);
    });
    // 效果：立即停在当前位置，且不再播放后续动画
    $('#stop').click(function () {
        $('#box').stop(true);
    });
});
</script>
</body>
</html>

小结

stop() 用于中止动画并控制队列：悬停等高频事件前先 .stop() 可消除闪烁排队，多段动画需要中断时用 stop(true) 清空队列。下一节学习动画完成后的回调函数。

笔记加载中…

标签：#jQuery

返回知识库