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(''+ele.width()+'<br />'+'height:'+ele.height()); } $("#start").click(function () { $("#box").stop(true,true).css({ 100, height: 100 }); $('#box').html('还原宽高100*100'); $("#box").animate({ 300, height: 300 }, 5000,function(){ boxMes($('#box')); }); $("#box").animate({ 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) 阻止当前动画的渐变执行（即一步执行到位），后，状态维持在此刻。