轉載來源：https://www.cnblogs.com/goodborder/p/5843050.html
在前臺頁面開發中有時候我們會需要一些比較酷的效果，這個時候使用JQuery中的動畫來實現便顯得非常的簡單。
最近在工作中碰到了一個頁面元素移動的效果，這是個簡單的頁面效果也非常容易實現。
在使用中用到了一個停止動畫的方法"stop()"，以前只是用也沒有過多的關注。
這幾天再次碰到，便翻開文檔測試了一番，竟也有了一些新的認識。對這個方法有了全新的瞭解，在這裏把我的測試記錄下來。
在JQuery文檔中對這個方法的解釋是這樣的：
一、概述
停止所有在指定元素上正在運行的動畫。
如果隊列中有等待執行的動畫(並且clearQueue沒有設爲true)，他們將被馬上執行。
二、沒有參數
場景模擬
假設有一個元素需要在背景中進行移動，然後回到起始位置。頁面中有三個按鈕，分別負責“開始移動”，“採用了stop方法的迴歸”，“沒有采用stop方法的迴歸”。
整體頁面效果圖如下：
測試代碼和效果
<script type="text/javascript"> $(function () { //向右移動600px $("#Button1").click(function () { $("#move").stop().animate({ left: 610 }, 3000); }); //立即往回移動（有stop） $("#Button2").click(function () { $("#move").stop().animate({ left: 10 }, 3000); }); //移動完600px，纔會往回移動（沒有stop） $("#Button3").click(function () { $("#move").animate({ left: 10 }, 3000); }); }); </script>
通過測試我們不難發現
有stop，當藍色方塊在向右側移動的時候，點擊按鈕，方塊會立即往回返（向左側移動）。
沒有stop，當藍色方塊在向右側移動的時候，點擊按鈕，方塊會等到完全移動到指定位置後才往回返（向左側移動）。
測試總結
stop()停止了當前正在執行的動畫，並使後續的動畫立即得到了執行。
三、兩個參數或者一個參數
查看文檔可以知道這個時候參數依次爲：[clearQueue],[gotoEnd] 並且都爲可選，類型都爲Boolean。
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
gotoEnd:讓當前正在執行的動畫立即完成，並且重設show和hide的原始樣式，調用回調函數等。
我們可以挨個進行測試。代碼如下：
<style type="text/css"> table, tr, th, td { margin: 0px; padding: 5px; border-collapse: collapse; border: 1px solid black; } .bg { background-color: #8FBC8F; border: 1px solid black; width: 1000px; height: 200px; margin: 10px; position: relative; } .line { position: absolute; background-color: #3b9feb; } #linetop { top: 10px; left: 10px; /*width:980px;*/ height: 5px; } </style> <script type="text/javascript"> $(function () { // var line; $("#start").click(function () { line = $("#linetop").animate({ width: 980 }, 3000) .animate({ height: 180 }, 3000); }); $("#stop").click(function () { $("#linetop").stop(); }); $("#stop_true").click(function () { $("#linetop").stop(true); }); $("#stop_false").click(function () { $("#linetop").stop(false); }); $("#stop_true_true").click(function () { $("#linetop").stop(true, true); }); $("#stop_true_false").click(function () { $("#linetop").stop(true, false); }); $("#stop_false_true").click(function () { $("#linetop").stop(false, true); }); $("#stop_false_false").click(function () { $("#linetop").stop(false, false); }); }); </script>
<body><input type="button" id="start" value="動作開始" /> <table> <tr> <th>方法</th> <th>參數</th> <th>說明</th> <th>方法</th> <th>參數</th> <th>說明</th> </tr> <tr> <td> <input type="button" id="stop" value="stop()" /></td> <td></td> <td colspan="4">清空隊列，當前執行動作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。後續動作會不再執行。 等同於：<span style="color:#ff6a00; font-weight:bold;">stop(false,false)</span> </td> </tr> <tr> <td> <input type="button" id="stop_true" value="stop(true)" /></td> <td>[clearQueue]</td> <td>清空隊列，當前執行動作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。後續動作會不再執行。</td> <td> <input type="button" id="stop_false" value="stop(false)" /></td> <td>[clearQueue]</td> <td>不清空隊列，當前執行動作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。後續動作會立即執行。</td> </tr> <tr> <td> <input type="button" id="stop_true_true" value="stop(true,true)" /> </td> <td>[clearQueue],[gotoEnd]</td> <td>清空隊列，當前執行動作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。後續動作會不再執行。</td> <td> <input type="button" id="stop_false_true" value="stop(false,true)" /> </td> <td>[clearQueue],[gotoEnd]</td> <td>不清空隊列，當前執行動作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。後續動作會立即執行。</td> </tr> <tr> <td><input type="button" id="stop_true_false" value="stop(true,false)" /></td> <td>[clearQueue],[gotoEnd]</td> <td>清空隊列，當前執行動作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。後續動作會不再執行。</td> <td><input type="button" id="stop_false_false" value="stop(false,false)" /></td> <td>[clearQueue],[gotoEnd]</td> <td>不清空隊列，當前執行動作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。後續動作會立即執行。</td> </tr> </table> <div class="bg" id="Div1"> <div class="line" id="linetop"></div> </div> </body>
我們可以看到如下整理結果
| 方法 | 參數 | 說明 | 方法 | 參數 | 說明 |
|---|---|---|---|---|---|
| 清空隊列，當前執行動作立即停止。後續動作會不再執行。 等同於：stop(false,false) | |||||
| [clearQueue] | 清空隊列，當前執行動作立即停止。後續動作會不再執行。 | [clearQueue] | 不清空隊列，當前執行動作立即停止。後續動作會立即執行。 | ||
| [clearQueue],[gotoEnd] | 清空隊列，當前執行動作立即完成。後續動作會不再執行。 | [clearQueue],[gotoEnd] | 不清空隊列，當前執行動作立即完成。後續動作會立即執行。 | ||
| [clearQueue],[gotoEnd] | 清空隊列，當前執行動作立即停止。後續動作會不再執行。 | [clearQueue],[gotoEnd] | 不清空隊列，當前執行動作立即停止。後續動作會立即執行。 | ||
四、筆記
在jQuery的較高版本中stop還有一種用法，就是和隊列（queue）配合使用。對於這種用法，我目前還不是還不是屬性，這裏無法給出一個好的解釋。
留待以後在慢慢研究了。
目前stop的用法相信也足夠我們只用了。