版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyxuefeng/article/details/82430673
stop(clearQueue,gotoEnd)
stop()方法用于停止当前正在运行的动画。
stop()两个参数皆为布尔值
第一个参数决定是否清空动画队列
第二个参数决定是否立即执行完/停止当前动画
情况1：立即停止当前动画，执行动画队列里的下一个动画
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stop</title>
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({width:300},2000);
$("#box").animate({height:100},2000);
$("#box").animate({width:100},2000);
});
$("#stop").click(function(){ //stop()默认两参数false，立即停止当前动画，执行动画队列里的下一个动画
$("#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>具体效果：情况1
情况2：立即执行完当前动画，然后执行动画队列的下一个动画
把script标签内代码改为：
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({width:300},2000);
$("#box").animate({height:100},2000);
$("#box").animate({width:100},2000);
});
$("#stop").click(function(){
// 立即执行完当前动画，然后执行动画队列的下一个动画
$("#box").stop(false,true);
});
});具体效果：情况2
情况3：停止执行当前动画，并清空动画队列
把script标签内代码改为：
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({width:300},2000);
$("#box").animate({height:100},2000);
$("#box").animate({width:100},2000);
});
$("#stop").click(function(){
// 停止执行当前动画，并清空动画队列
$("#box").stop(true,false);
});
});具体效果：情况3
情况4：立即执行完当前动画，并清空动画队列
把script标签内代码改为：
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},2000);
$("#box").animate({width:300},2000);
$("#box").animate({height:100},2000);
$("#box").animate({width:100},2000);
});
$("#stop").click(function(){
// 停止执行当前动画，并清空动画队列
$("#box").stop(true,true);
});
});具体效果：情况4