工作中遇到過的實際案例：
1、我在項目里做的一個下拉菜單，當鼠標移上去的時候就菜單顯示，當鼠標離開的時候菜單隱藏
true，true)，這樣每次快速的移入移出菜單，就正常了，當移入一個菜單的時候，停止所有加入隊列的動畫，但是完成當前的動畫（跳至當前動畫的最終效果位置）
$scope.sendMsg = function($event){ $event.stopPropagation(); $('.add').stop(true,true).fadeIn(500); $('.add').stop(true,true).delay(2000).fadeOut(1000); }
目的：為了 了解stop()的用法，舉個例子，直觀的方式看看。
實物：一個id="animater"的div包含了一段文字。(以下用animator表示實物)
動畫最終的完整效果： animater向右移動800px（這個完整的過程是動畫1），然后，字體逐漸變大（這個完整的過程是動畫2），然后，透明度逐漸降低到0（這個完整的過程是動畫3），然后透明度逐漸恢復到1（這個完整的過程是動畫4），然后字體大小變為16px同時移動到距離左邊界200px的位置（這個完整的過程是動畫5）.
操作：點擊不同id的button，觀看效果。
HTML代碼：
<div id="animater"> stop()方法測試 </div>
<div id="button"> <input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </div>
CSS代碼：
#animater{ width: 150px; background:activeborder; border: 1px solid black; /*為了移動，需設置此屬性*/ position: relative; }
jquery代碼：
// 為了看效果，隨意寫的動畫 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); // 點擊不同的button執行不同的操作 $('#button1').click(function(){ //默認參數是false，不管寫一個false還是兩個false還是沒寫false效果一樣 $('#animater').stop(); }); $('#button2').click(function(){ //第二個參數默認false $('#animater').stop(true); }); $('#button3').click(function(){ $('#animater').stop(false,true); }); $('#button4').click(function(){ $('#animater').stop(true,true); });
W3School上是這樣的說明的：
stop(stopAll,goToEnd)
| 參數 | 描述 |
|---|---|
| stopAll | 可選。規定是否停止被選元素的所有加入隊列的動畫。 |
| goToEnd | 可選。規定是否允許完成當前的動畫。 該參數只能在設置了 stopAll 參數時使用。 |
我的理解：
stopAll 為false時，不停止被選元素所有加入隊列的動畫,僅停止當前的動畫。stopAll為true時，停止所有加入隊列的動畫（如goToend為true，直接跳到當前動畫的最終效果）。
goToend為false時，不允許直接跳到當前動畫的最終效果(應該就是所謂的完成當前的動畫吧)，goToend為true時，允許直接跳到完成當前動畫的最終末尾效果
每次運行頁面,animater運動時，點擊不同button,看到如下不同的效果（animater處在動畫1時點擊）：
點擊按鈕button1（stop()），由於兩個參數都是false。所以點擊發生時，animater沒有跳到當前動畫（動畫1）的最終效果，而直接進入動畫2，然后動畫3，4，5.直至完成整個動畫。
點擊按鈕button1（stop(true)），由於第一個是true，第二個是false，所以animater立刻全部停止了，動畫不動了。
點擊按鈕button1（stop(false,true)），由於第一個是false，第二個是true，所以點擊發生時，animater身處的當前動畫（動畫1）停止並且animater直接跳到當前動畫（動畫1）的最終末尾效果位置，接着正常執行下面的動畫（動畫2，3，4，5），直至完成整個動畫。
點擊按鈕button1（stop(true，true)），由於兩個都是true，所以點擊發生時，animater跳到當前動畫（動畫1）的最終末尾效果位置，然后，全部動畫停止。
文章轉自：http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html