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

stop()方法的語法結(jié)構(gòu)為：

stop([clearQueue],[gotoEnd]);

 參數(shù)clearQueue和gotoEnd都是可選參數(shù)，為Boolean值（true或false）。clearQueue代表是否清空未執(zhí)行完的動畫隊列，gotoEnd代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末狀態(tài)。

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

 <!-- html部分 -->
 <div id="panel" style="width: 60px;height: 22px;background-color: #eee;">呵呵</div> 

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

此時，在光標(biāo)移入時，觸發(fā)光標(biāo)移入動畫（在0.2秒內(nèi)height變?yōu)?50），在動畫還沒執(zhí)行完的時候光標(biāo)移出，則停止當(dāng)前動畫（可能height還未到達(dá)150），執(zhí)行光標(biāo)移出觸發(fā)的動畫（在0.3秒內(nèi)height變回22）。反之亦然。

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

$("#panel").hover(function() {
  $(this).stop()
   .animate({height: "150"}, 200) //如果在此時觸發(fā)了光標(biāo)的移出事件
           //將執(zhí)行下面的動畫
   .animate({width: "300"},300); //而非光標(biāo)移出事件中的動畫
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

此時只用一個不帶參數(shù)的stop()方法就顯得力不從心了。因?yàn)閟top()方法只會停止正在進(jìn)行的動畫，如果動畫正執(zhí)行在第1階段（改變height的階段），則觸發(fā)光標(biāo)移出事件后，只會停止當(dāng)前的動畫，并繼續(xù)進(jìn)行下面的.animate({width: "300"},300)動畫，而光標(biāo)移出事件中的動畫要等這個動畫結(jié)束后才會繼續(xù)執(zhí)行，這顯然不是預(yù)期的結(jié)果。這種情況下stop()方法的第一個參數(shù)就發(fā)揮作用了。

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

$("#panel").hover(function() {
  $(this).stop(true)
   .animate({height: "150"}, 200) //如果在此時觸發(fā)了光標(biāo)的移出事件
           //直接跳過后面的動畫隊列
   .animate({width: "300"},300); 
 },function() {
  $(this).stop()
   .animate({height: "22"}, 200)
   .animate({width: "60"},300);
 });

（3）第2個參數(shù)（gotoEnd）可以用于讓正在執(zhí)行的動畫直接到達(dá)結(jié)束時刻的狀態(tài)，通常用于后一個動畫需要基于前一個動畫的末狀態(tài)的情況，可以通過stop(false,true)這種方式來讓當(dāng)前動畫直接到達(dá)末狀態(tài)。

（4）兩者結(jié)合起來stop(true,true)，即停止當(dāng)前動畫并直接到達(dá)當(dāng)前動畫的末狀態(tài)，并清空動畫隊列。

（5）注意，jQuery只能設(shè)置正在執(zhí)行的動畫的最終狀態(tài)，而沒有提供直接到達(dá)執(zhí)行動畫隊列最終狀態(tài)的方法。例如有一組動畫：

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

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

溫馨提示：

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論