作為前端開發(fā)人員，JS和JQuery是我們經(jīng)常用到的開發(fā)語言和工具類庫。我們都曉得，在jQuery中有一個很強大的方法——stop(),他是阻止在連續(xù)動畫或事件中出現(xiàn)重復累積狀況的方法。那么，stop()怎么用呢？來帶大家先認識一下stop()吧：

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

$(selector).stop(stopAll,goToEnd)

參數(shù)：（默認情況下，不寫參數(shù)，則會被認為兩個參數(shù)都是false。）

stopAll:可選。規(guī)定是否停止被選元素的所有加入隊列的動畫。意思就是如果該參數(shù)值為true，則會停止所有后續(xù)動畫或事件。如果該參數(shù)值為false，則只停止被選元素當前執(zhí)行的動畫，后續(xù)動畫不受影響。因此，該參數(shù)一般都為false。

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

下面是對應的代碼：

HTML：

代碼如下:

<p id="content">
<p class="slide_box">
<p class="img">
<img src="images/page_a.png">
<p class="start"> <a class="start_btn" href="javascript:void(0)">開始抽獎</a> </p>
</p >
<p class="img" style="display:none;" >
<img src="images/page_b.png">
<a class="rank_30" href="javascript:void(0);">30級</a>
<a class="rank_45" href="javascript:void(0);">45級</a>
<a class="rank_55" href="javascript:void(0);">55級</a>
</p>
<p class="img" style="display:none;" >
<img src="images/page_c.png">
<a class="prize_notes" href="javascript:void(0);">獎品記錄</a>
</p>
</p>
</p>

CSS：

代碼如下:

#content{/* margin-top:10em;*/ width:48em; margin:0 auto;}
#content p{ display:block; width:100%;}
#content p.cont_b{ position:relative; text-align:center;background:url(../images/content_bgb.jpg) no-repeat; background-size:100% 100%;}
#content p img{ display:block; width:100%; border:none;}
#content p .slide_box{ position:absolute; top:0px; width:100%; }
#content p .img .start{ position:absolute; top:290px;}
#content p .img a.start_btn{ display:block; width:150px; height:150px; text-indent:-9999px; margin:0 auto;}/*修改*/
#content p .img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}
#content p .img a.rank_45{ position:absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}
#content p .img a.rank_55{ position:absolute; top:430px; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}
#content p .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 < 2){
page.slideUp().stop(false,true).eq(num+1).slideDown();
num++;
}else{
page.slideUp().stop(false,true).eq(0).slideDown();
num = 0;
}
});
});

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

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com