中止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") ){   //判斷元素是否處於動畫狀態
  //若是當前元素沒有執行動畫，...  
}