jQuery 效果 - stop() 方法 概述
jQuery 2022-06-01 15:00:19小码哥的IT人生shichen
jQuery 效果 - stop() 方法
实例
停止当前正在运行的动画：
$("#stop").click(function(){
$("#box").stop();
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({height:100},2000);
});
$("#stop").click(function(){
$("#box").stop();
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
stop() 方法停止当前正在运行的动画。
语法
$(selector).stop(stopAll,goToEnd)
| 参数 | 描述 |
|---|---|
| stopAll | 可选。规定是否停止被选元素的所有加入队列的动画。 |
| goToEnd |
可选。规定是否允许完成当前的动画。 该参数只能在设置了 stopAll 参数时使用。 |
亲自试一试 - 实例
完整实例【停止动画队列】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true);
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
停止被选元素的所有加入队列的动画。
完整实例【在当前动画完成后停止动画队列】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(true,true);
});
});
</script>
</head>
<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
停止被选元素的所有加入队列的动画，但允许完成当前动画。
