jQuery停止動畫——stop()方法的使用

　　很多時候需要停止匹配元素正在進行的動畫，比如，當鼠標選入元素時顯示菜單，鼠標離開時隱藏下拉菜單，如果鼠標移入移出過快的話就會導致動畫效果與鼠標的動作不一致的情況，此時stop()就派上用場了。

         stop()方法的語法結構為：

                   stop([clearQueue],[gotoEnd]);

         參數clearQueue和gotoEnd都是可選參數，為Boolean值（true或false）。clearQueue代表是否清空未執行完的動畫隊列，gotoEnd代表是否直接將正在執行的動畫跳轉到末狀態。

（1）直接使用使用stop()方法，則會立即停止當前正在進行的動畫，如果接下來還有動畫等待繼續進行，則以當前狀態開始接下來的動畫。比如下面例子：

    <!-- html部分 -->
   <div id="panel" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">呵呵</div> 
 
    <!-- 引入jquery庫 -->
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 

    /* js部分 */
    $("#panel").hover(function() {
        $(this).stop().animate({height: "150"}, 200);
    },function() {
        $(this).stop().animate({height: "22"}, 300);
    });

　　此時，在光標移入時，觸發光標移入動畫（在0.2秒內height變為150），在動畫還沒執行完的時候光標移出，則停止當前動畫（可能height還未到達150），執行光標移出觸發的動畫（在0.3秒內height變回22）。反之亦然。

如果遇到組合動畫，例如：

    $("#panel").hover(function() {
        $(this).stop()
            .animate({height: "150"}, 5000)       //如果在此時觸發了光標的移出事件
                                                  //將執行下面的動畫
            .animate({borderWidth: "20px"},3000); //而非光標移出事件中的動畫
    },function() {
        $(this).stop()
            .animate({width: "300"}, 2000)
            .animate({fontSize: "24px"},3000);
    });

　　此時只用一個不帶參數的stop()方法就顯得力不從心了。因為stop()方法只會停止正在進行的動畫，如果動畫正執行在第1階段（改變height的階段），則觸發光標移出事件后，只會停止當前的動畫，並繼續進行下面的.animate({borderWidth: "20px"},3000)動畫，而光標移出事件中的動畫要等這個動畫結束后才會繼續執行，這顯然不是預期的結果。這種情況下stop()方法的第一個參數就發揮作用了。

（2）stop(true)，此時程序會把當前元素接下來尚未執行完的動畫隊列清空。所以可以把上面代碼改成如此代碼，就能實現預期的效果。

    $("#panel").hover(function() {
        $(this).stop(true)
            .animate({height: "150"}, 5000)       //如果在此時觸發了光標的移出事件
                                                  //直接跳過后面的動畫隊列
            .animate({borderWidth: "20px"},3000); 
    },function() {
        $(this).stop(true)
            .animate({width: "300"}, 2000)
            .animate({fontSize: "24px"},3000);
    });

（3）第2個參數（gotoEnd）可以用於讓正在執行的動畫直接到達結束時刻的狀態，通常用於后一個動畫需要基於前一個動畫的末狀態的情況，可以通過stop(false,true)這種方式來讓當前動畫直接到達末狀態。

（4）兩者結合起來stop(true,true)，即停止當前動畫並直接到達當前動畫的末狀態，並清空動畫隊列。

（5）注意，jQuery只能設置正在執行的動畫的最終狀態，而沒有提供直接到達執行動畫隊列最終狀態的方法。例如有一組動畫：

    $("div.content")
        .animate({width: "300"}, 200)
        .animate({height: "150"}, 300)
        .animate({opacity: "0.2"}, 200);

　　無論怎么設置stop()方法，均無法再改變"width"或者"height"時，將此<div>元素的末狀態變成300*150大小，並且設置透明度為0.2。

 

溫馨提示：

　　jQuery中的動畫有show()、hide()、fadeIn()、fadeOut()、slideDown()、slideUp()、animate()等等。stop()方法對上述的動畫都適用。

 

參考自《鋒利的jQuery第二版》