停止animate動畫和判斷是否處於動畫狀態

1.停止元素的動畫：stop([cleanQueue, gotoEnd]):第一個參數代表是否要清空未執行完的動畫隊列，第二個參數代表是否直接將正在執行的動畫跳轉到末狀態。

無參數stop()：立即停止當前的動畫，如果接下來還有動畫則以當前狀態開始接下來的動畫。

舉例：為元素綁定hover事件之后，如果光標移入移出的速度太快，導致移入的動畫還沒執行完，就移出光標，則移出的動畫效果就會被放到隊列，等移入的動畫完成后在執行。因此如果光標的移入移出速度太快，就會導致動畫效果與移動光標不一致的情況。

此時如果在移入移出動畫之前加入stop(),就能解決這個問題了。

$("div").hover(function(){
    $(this).stop().animate({"height":"300px", "width":"300px"}, 200);
}, function(){
    $(this).stop().animate({"height":"100px", "width":"100px"}, 200);
});

如果遇到組合動畫：

 

$("div").hover(function(){
    $(this).stop().animate({"height":"300px"}, 200)  /*如果在此時觸發了光標的移出事件，將執行下邊的動畫，而非光標移出的動畫，以為stop()是立即停止當前的動畫進入下一個動畫。*/
　　　　.animate({"width":"300px"}, 200);
}, function(){
    $(this).stop().animate({"height":"100px"}, 200)
　　　　.animate({"width":"100px"}, 200);
});

此時需要用stop的第一個參數，設置為true,程序會把當前元素接下來尚未執行的動畫隊列都清空。

$("div").hover(function(){
    $(this).stop(true).animate({"height":"300px"}, 200)  /*如果在此時觸發了光標的移出事件，會直接停止當前的動畫，並且清空了后邊的動畫，這樣就會執行光標移出的動畫了。*/
　　　　.animate({"width":"300px"}, 200);
}, function(){
    $(this).stop(true).animate({"height":"100px"}, 200)
　　　　.animate({"width":"100px"}, 200);
});

第二個參數gotoEnd可以讓當前的動畫直接達到結束時刻的狀態，通常用於后一個動畫需要基於前一個動畫的末狀態的情況。

stop(false, true) : 當前的動畫直接達到末狀態。

stop(true, true) : 當前的動畫直接達到末狀態並清空當前對象的動畫隊列。

注意：jQuery只能設置正在執行的動畫的最終狀態，不能直接達到未執行動畫的最終狀態。

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

無論怎么設置stop()值，均無法在改變"width"或者"height"時，將此div的元素末狀態改為300*150大小，並且透明度0.2。既stop只能改變當前正在執行的動畫。

2.判斷元素是否處於動畫狀態：

在使用animate()方法的時候，要避免動畫積累導致動畫與用戶行為不一致的情況，需要判斷當前元素是否正在執行動畫。

if(! $(element).is(":animated") ){   //判斷元素是否處於動畫狀態
  //如果當前元素沒有執行動畫，...  
}