jQuery stop()用法实例详解
概述
jQuery stop函数可以用于停止当前正在动画的元素。在使用jQuery进行动画时，元素的动画时间可能会非常长，有时候需要停止这个动画，这时就要用到stop函数。
语法
$(selector).stop(stopAll,goToEnd);
selector：必选项，规定被选元素。stopAll：可选项，规定是否立即完成动画，默认值是false，表示立即完成动画，并且启用队列中的下一个动画。设置为true，表示清除队列中的所有动画，立即完成当前动画。goToEnd：可选项，规定动画是否应该已最后一个关键帧结束。默认是false，表示停止动画在当前位置。设置为true，表示动画将直接到达结尾位置。
实例
停止当前动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>停止当前动画示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo" style="width:100px;height:100px;background-color:red;position:relative;left:0px;"></div>
<br>
<button id="stopBtn">停止动画</button>
<script>
$("#stopBtn").click(function () {
$("#demo").animate({ left: '100px' }, 5000); //向右移动100px，动画时间为5s
$("#demo").stop(); //停止当前正在进行的动画
});
</script>
</body>
</html>
代码解释：
- 点击按钮后，div向右移动100px，并且动画时间为5秒
- 再次点击按钮时，停止当前正在进行的动画
停止一个元素的所有动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>停止一个元素的所有动画示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="demo1" style="width:100px;height:100px;background-color:yellow;position:relative;left:0px;"></div>
<div id="demo2" style="width:100px;height:100px;background-color:blue;position:relative;left:0px;"></div>
<br>
<button id="stopBtn1">停止div1的动画</button>
<button id="stopBtn2">停止div2的动画</button>
<button id="stopAllBtn">停止所有动画</button>
<script>
$("#stopBtn1").click(function () {
$("#demo1").animate({ left: '100px' }, 5000); //向右移动100px，动画时间为5s
$("#demo2").animate({ left: '100px' }, 5000); //同时向右移动100px，动画时间为5s
$("#demo1").stop(); //停止div1的当前正在进行的动画
});
$("#stopBtn2").click(function () {
$("#demo1").animate({ left: '100px' }, 5000); //向右移动100px，动画时间为5s
$("#demo2").animate({ left: '100px' }, 5000); //同时向右移动100px，动画时间为5s
$("#demo2").stop(); //停止div2的当前正在进行的动画
});
$("#stopAllBtn").click(function () {
$("#demo1").animate({ left: '100px' }, 5000); //向右移动100px，动画时间为5s
$("#demo2").animate({ left: '100px' }, 5000); //同时向右移动100px，动画时间为5s
$("div").stop(true); //停止所有div元素的动画
});
</script>
</body>
</html>
代码解释：
- 点击第一个按钮时，div1和div2同时向右移动100px，并且动画时间为5秒
- 点击第二个按钮时，停止div1的当前正在进行的动画
- 点击第三个按钮时，停止所有div元素的动画
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery stop()用法实例详解 - Python技术站
微信扫一扫 
支付宝扫一扫 