stop 用法
阿新 • • 發佈：2019-04-16
組合 pla hidden ref flow dfa idt query jquery 
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">View Code*{ 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) 阻止當前動畫的漸變執行（即一步執行到位），後，狀態維持在此刻。
stop 用法