鋒利的jQuery-4--停止動畫和判斷是否處於動畫狀態(防止動畫排入佇列過多的辦法)

標籤：style   blog   io   color   使用   sp   strong   div   on   

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

鋒利的jQuery-4--停止動畫和判斷是否處於動畫狀態(防止動畫排入佇列過多的辦法)