1. stop 文档
$(selector).stop(stopAll,goToEnd)
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。
2. 案例代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>stop的用法案例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
cursor: pointer;
}
#start{
margin: 20px auto;
width: 500px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid red;
} .button{
margin: 0 auto;
width: 1000px;
overflow: hidden;
height: 300px;
border: 1px solid red;
}
.button div{
float: left;
margin-left: 20px;
width: 200px;
height: 50px;
line-height: 50px;
border: 1px solid red;
text-align: center;
} #box {
position: relative;
margin: 20px auto;
width: 100px;
height: 100px;
background: #98bf21;
}
</style>
</head> <body>
<p id="start">start</p>
<div class="button">
<div id="button1" >stop() <br /> stop(false,false)</div>
<div id="button2" >stop(true) <br /> stop(true,false)</div>
<div id="button3" >stop(false,true)</div>
<div id="button4" >stop(true,true)</div>
</div>
<div id="box"></div> <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
function boxMes(ele){
ele.html('width:'+ele.width()+'<br />'+'height:'+ele.height());
} $("#start").click(function () { $("#box").stop(true,true).css({
width: 100,
height: 100
});
$('#box').html('还原宽高100*100'); $("#box").animate({
width: 300,
height: 300
}, 5000,function(){
boxMes($('#box'));
});
$("#box").animate({
width: 100,
height:100
}, 5000,function(){
boxMes($('#box'));
}); }); $('#button1').click(function () {
$('#box').stop();
boxMes($('#box'));
});
$('#button2').click(function () {
$('#box').stop(true);
boxMes($('#box'));
});
$('#button3').click(function () {
$('#box').stop(false, true);
boxMes($('#box'));
});
$('#button4').click(function () {
$('#box').stop(true, true);
boxMes($('#box'));
}); }) </script>
</body> </html>
3. 总结
stop 用于阻止当前动画执行及后续动画处理（当前动画必然终止，其最终状态及绑定上的后续动画是否执行取决于两个配置组合），默认配置参数为 stop(false,false) 等同于 stop()
stop(false,false) / stop() 阻止当前动画的后续执行，同时后续动画以当前状态为初始状态 正常执行
stop(true,false) / stop(true) 阻止当前动画的后续执行，同时后续动画也不再执行，状态维持在此刻。
stop(false,true) 阻止当前动画的渐变执行（即一步执行到位），后，以当前动画的结尾状态为初始状态执行后续动画。
stop(true,true) 阻止当前动画的渐变执行（即一步执行到位），后，状态维持在此刻。