jQuery stop()方法
栏目：
jquery
发布时间：2024-12-24
在 jQuery 中，stop() 方法用于停止当前正在运行的动画或效果。这个方法非常有用，尤其是在你需要立即中断一个动画并跳转到动画的最终状态或开始一个新的动画时。
基本用法
stop() 方法的基本语法如下：
$(selector).stop([clearQueue], [jumpToEnd]);
selector：一个 jQuery 选择器，用于选择你想要停止动画效果的元素。clearQueue（可选）：一个布尔值，指示是否要清除未执行的动画队列。默认值为false。jumpToEnd（可选）：一个布尔值，指示是否要让当前正在执行的动画立即跳转到结束状态。默认值为false。
参数详解
clearQueue：- 如果设置为
true，则停止当前动画并清除动画队列中所有未执行的动画。 - 如果设置为
false（默认值），则仅停止当前动画，动画队列中未执行的动画将继续执行。
- 如果设置为
jumpToEnd：- 如果设置为
true，则当前动画将立即跳转到其结束状态。 - 如果设置为
false（默认值），则当前动画将平滑地停止在其当前状态。
- 如果设置为
示例
- 停止当前动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery stop() 方法</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#startButton").click(function(){
$("#myDiv").animate({width: '300px'}, 2000);
});
$("#stopButton").click(function(){
$("#myDiv").stop();
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<button id="startButton">开始动画</button>
<button id="stopButton">停止动画</button>
<div id="myDiv">这是一个 Div</div>
</body>
</html>
在这个示例中，点击“开始动画”按钮会使 div 元素的宽度逐渐增加到 300 像素。在动画过程中，点击“停止动画”按钮会立即停止动画，但 div 的宽度会保持在当前状态。
- 停止并清除队列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery stop() 方法 - 停止并清除队列</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#startButton").click(function(){
$("#myDiv")
.animate({width: '200px'}, 1000)
.animate({height: '200px'}, 1000);
});
$("#stopButton").click(function(){
$("#myDiv").stop(true);
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<button id="startButton">开始动画序列</button>
<button id="stopButton">停止动画序列</button>
<div id="myDiv">这是一个 Div</div>
</body>
</html>
在这个示例中，点击“开始动画序列”按钮会使 div 元素的宽度先增加到 200 像素（1 秒内），然后高度增加到 200 像素（再 1 秒内）。在动画过程中，点击“停止动画序列”按钮会立即停止当前动画，并清除动画队列中未执行的动画（即高度增加的动画）。
- 停止并跳转到结束状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery stop() 方法 - 停止并跳转到结束状态</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#startButton").click(function(){
$("#myDiv").animate({width: '300px'}, 2000);
});
$("#stopButton").click(function(){
$("#myDiv").stop(false, true);
});
});
</script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<button id="startButton">开始动画</button>
<button id="stopButton">停止并跳转到结束</button>
<div id="myDiv">这是一个 Div</div>
</body>
</html>
在这个示例中，点击“开始动画”按钮会使 div 元素的宽度逐渐增加到 300 像素。在动画过程中，点击“停止并跳转到结束”按钮会立即停止当前动画，并将 div 的宽度跳转到 300 像素（即动画的最终状态）。
总结
stop() 方法是 jQuery 中用于控制动画流程的一个非常有用的工具。通过适当地设置 clearQueue 和 jumpToEnd 参数，你可以灵活地控制动画的停止行为，以满足不同的需求。无论是停止当前动画、清除动画队列还是跳转到动画的最终状态，stop() 方法都能很好地完成任务。
本文地址：https://www.tides.cn/p_jquery-stop