理解jQuery stop()方法_jquery

身為前端開發人員，JS和JQuery是我們常用到的開發語言和工具類別庫。我們都曉得，在jQuery中有一個很強大的方法－stop(),他是阻止在連續動畫或事件中出現重複累積狀況的方法。那麼，stop()怎麼用呢？來帶大家先認識stop()吧：

stop()在語法上有兩個參數，分別都是Boolean布林值。且都是可選的，但是也有規定，如下：

$(selector).stop(stopAll,goToEnd)

參數：（預設情況下，不寫參數，則會被認為兩個參數都是false。）

stopAll:可選。規定是否停止被選元素的所有加入隊列的動畫。意思是如果該參數值為true，則會停止所有後續動畫或事件。如果該參數值為false，則只停止被選取元素目前執行的動畫，後續動畫不受影響。因此，此參數一般都為false。

goToEnd：可選。規定是否允許完成目前動畫，該參數只能在設定了stopAll參數時使用。上面我們說了，stopAll參數我們通常都會寫fasle值，不是默認，而是真實的寫上該參數。那麼goToEnd參數就有兩個選擇了，一個是false，一個是true。其中意思，大家應該都懂了。一般都為true。意思是允許完成當前動畫。

以下是對應的程式碼：

HTML：

複製程式碼 程式碼如下:

   

     

   
       

開始抽獎

     

     

   
    30級
    45級
    55級
 

     

   
    獎品記錄
 

   

 
CSS：

複製程式碼 程式碼如下:

#content{/* margin-top:10em;*/ width:48em; margin:0 auto;}
#content div{ display:block; width:100%;}
#content div.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}
#content div img{ display:block; width:100%; border:none;}
#content div .slide_box{ position:absolute; top:0px; width:100%; }
#content div .img .start{ position:absolute; top:290px;}
#content div .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px;  margin:0 auto;}/*修改*/
#content div .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}
;}
;}
;}
;}

;}
;};}

;}

; #content div .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999pxx;}

; #content div .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}

; #content div .img a.prize_notes{ position:absolute; top:470px; right:50px; display:block; width:150px; height:150px; text-indent:-9999px;};}   JS_jQuery:

複製程式碼 程式碼如下:

var page =$(".slide_box .img");
var page_num = page.length;
var num = 0;
    $(".next_btn").click(function(e){
    if(num page.slideUp().stop(false,true).eq(num 1).slideDown();
num ;
}else{
page.slideUp().stop(false,true).eq(0).slideDown();
num = 0;
}
});
});

上面是在工作中寫一個點擊事件效果時遇到的事件累積情況，，在JS部分，有用到stop()方法，大家可以將參數去掉或改變，試試看。希望對大家有幫助。嘎嘎