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

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

stop([clearQueue],[gotoEnd]);

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

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

 <!-- 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);
 });

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

如果遇到組合動(dòng)畫，例如：

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

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

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

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

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

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

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

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

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

溫馨提示：

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

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

最新評(píng)論