jQuerystop()淺析

作為前端開(kāi)發(fā)人員,JSJQuery是我們經(jīng)常用到的開(kāi)發(fā)語(yǔ)言和工具類庫(kù)。我們都曉得,在jQuery中有一個(gè)很強(qiáng)大的方法——stop(),他是阻止在連續(xù)動(dòng)畫(huà)或事件中出現(xiàn)重復(fù)累積狀況的方法。那么,stop()怎么用呢?小碼哥來(lái)帶大家先認(rèn)識(shí)一下stop()吧:

創(chuàng)新互聯(lián)建站公司2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元旅順口做網(wǎng)站,已為上家服務(wù),為旅順口各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

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

$(selector).stop(stopAll,goToEnd)

參數(shù):(默認(rèn)情況下,不寫(xiě)參數(shù),則會(huì)被認(rèn)為兩個(gè)參數(shù)都是false。)

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

goToEnd:可選。規(guī)定是否允許完成當(dāng)前動(dòng)畫(huà),該參數(shù)只能在設(shè)置了stopAll參數(shù)時(shí)使用。上面我們說(shuō)了,stopAll參數(shù)我們一般都會(huì)寫(xiě)fasle值,不是默認(rèn),而是真實(shí)的寫(xiě)上該參數(shù)。那么goToEnd參數(shù)就有兩個(gè)選擇了,一個(gè)是false,一個(gè)是true。其中意思,大家應(yīng)該都明白了。一般都為true。意思就是允許完成當(dāng)前動(dòng)畫(huà)。

下面是對(duì)應(yīng)的代碼:

HTML:

<div id="content">

    <div class="slide_box">

      <div class="img"> 

   <img src="p_w_picpaths/page_a.png">

        <div class="start"> <a class="start_btn" href="javascript:void(0)">開(kāi)始抽獎(jiǎng)</a> </div>

      </div >

      <div class="img" > 

   <img src="p_w_picpaths/page_b.png"> 

   <a class="rank_30" href="javascript:void(0);">30級(jí)</a> 

   <a class="rank_45" href="javascript:void(0);">45級(jí)</a> 

   <a class="rank_55" href="javascript:void(0);">55級(jí)</a> 

 </div>

      <div class="img" > 

   <img src="p_w_picpaths/page_c.png"> 

   <a class="prize_notes" href="javascript:void(0);">獎(jiǎng)品記錄</a> 

 </div>

    </div>

</div>

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(../p_w_picpaths/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:-9999px;}

#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 < 2){

page.slideUp().stop(false,true).eq(num+1).slideDown();

num++;

}else{

page.slideUp().stop(false,true).eq(0).slideDown();

num = 0;

}

});

});

上面是小碼哥在工作中寫(xiě)一個(gè)點(diǎn)擊事件效果時(shí)遇到的事件累積情況,,在JS部分,有用到stop()方法,大家可以將參數(shù)去掉或改變,試試看。希望對(duì)大家有所幫助。嘎嘎

本文標(biāo)題:jQuerystop()淺析
本文路徑:http://bm7419.com/article48/igoshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名