jQuery 提供了 stop() 方法用于快速结束当前正在执行的动画，其语法为：
$(selector).stop(stopAll, goToEnd);
其中 stopAll 参数用于控制是否停止正在队列中等待执行的动画，默认为 false，即仅结束当前正在执行的动画。goToEnd 参数用于控制是否立即完成动画至结尾状态，默认为 false，即立即结束。
以下是两条示例说明：
示例一：停止当前动画
<!DOCTYPE html>
<html>
<head>
<title>示例一：停止当前动画</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
// 点击按钮开始动画
$('#btn-start').click(function() {
$('#box').animate({
left: '500px'
}, 5000);
});
// 点击按钮停止当前动画
$('#btn-stop').click(function() {
$('#box').stop();
});
});
</script>
</head>
<body>
<button id="btn-start">开始</button>
<button id="btn-stop">停止</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 0;"></div>
</body>
</html>
在该示例中，我们在页面上放置了一个红色的正方形，并使用 animate() 方法使其从左侧移动到页面右侧。当点击“开始”按钮时，动画开始执行。当点击“停止”按钮时，使用 stop() 方法停止当前正在执行的动画。
示例二：立即完成动画至结尾状态
<!DOCTYPE html>
<html>
<head>
<title>示例二：立即完成动画至结尾状态</title>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
// 点击按钮开始动画
$('#btn-start').click(function() {
$('#box').animate({
left: '500px'
}, 5000);
});
// 点击按钮立即完成动画
$('#btn-complete').click(function() {
$('#box').stop(true, true);
});
});
</script>
</head>
<body>
<button id="btn-start">开始</button>
<button id="btn-complete">立即完成</button>
<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 0;"></div>
</body>
</html>
在该示例中，我们与示例一相同地使用了 animate() 方法使红色正方形从左侧移动到页面右侧。当点击“开始”按钮时，动画开始执行。当点击“立即完成”按钮时，使用 stop(true, true) 方法立即将动画执行至结尾状态。第一个 true 参数用于表示停止队列中等待执行的动画，第二个 true 参数用于表示立即完成当前动画至结尾状态。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 快速结束当前正在执行的动画 - Python技术站
微信扫一扫 
支付宝扫一扫 