理解jQuery stop()方法
作為前端開(kāi)發(fā)人員,JS和JQuery是我們經(jīng)常用到的開(kāi)發(fā)語(yǔ)言和工具類庫(kù)。我們都曉得,在jQuery中有一個(gè)很強(qiáng)大的方法——stop(),他是阻止在連續(xù)動(dòng)畫或事件中出現(xiàn)重復(fù)累積狀況的方法。那么,stop()怎么用呢?來(lái)帶大家先認(rèn)識(shí)一下stop()吧:
stop()在語(yǔ)法上有兩個(gè)參數(shù),分別都是Boolean布爾值。且都是可選的,但是也有規(guī)定,如下:
$(selector).stop(stopAll,goToEnd)
參數(shù):(默認(rèn)情況下,不寫參數(shù),則會(huì)被認(rèn)為兩個(gè)參數(shù)都是false。)
stopAll:可選。規(guī)定是否停止被選元素的所有加入隊(duì)列的動(dòng)畫。意思就是如果該參數(shù)值為true,則會(huì)停止所有后續(xù)動(dòng)畫或事件。如果該參數(shù)值為false,則只停止被選元素當(dāng)前執(zhí)行的動(dòng)畫,后續(xù)動(dòng)畫不受影響。因此,該參數(shù)一般都為false。
goToEnd:可選。規(guī)定是否允許完成當(dāng)前動(dòng)畫,該參數(shù)只能在設(shè)置了stopAll參數(shù)時(shí)使用。上面我們說(shuō)了,stopAll參數(shù)我們一般都會(huì)寫fasle值,不是默認(rèn),而是真實(shí)的寫上該參數(shù)。那么goToEnd參數(shù)就有兩個(gè)選擇了,一個(gè)是false,一個(gè)是true。其中意思,大家應(yīng)該都明白了。一般都為true。意思就是允許完成當(dāng)前動(dòng)畫。
下面是對(duì)應(yīng)的代碼:
HTML:
<div id="content">
<div class="slide_box">
<div class="img">
<img src="images/page_a.png">
<div class="start"> <a class="start_btn" href="javascript:void(0)">開(kāi)始抽獎(jiǎng)</a> </div>
</div >
<div class="img" style="display:none;" >
<img src="images/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" style="display:none;" >
<img src="images/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(../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:-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;
}
});
});
上面是在工作中寫一個(gè)點(diǎn)擊事件效果時(shí)遇到的事件累積情況,,在JS部分,有用到stop()方法,大家可以將參數(shù)去掉或改變,試試看。希望對(duì)大家有所幫助。嘎嘎
- jquery hover 不停閃動(dòng)問(wèn)題的解決方法(亦為stop()的使用)
- 詳解jQuery停止動(dòng)畫——stop()方法的使用
- jQuery stop()用法實(shí)例詳解
- 逐一介紹Jquery data()、Jquery stop()、jquery delay()函數(shù)(詳)
- jquery中animate的stop()方法作用實(shí)例分析
- JQuery動(dòng)畫animate的stop方法使用詳解
- Jquery ajaxStart()與ajaxStop()方法(實(shí)例講解)
- Jquery阻止事件冒泡 event.stopPropagation
- jq stop()和:is(:animated)的用法及區(qū)別(詳解)
相關(guān)文章
jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能附源碼下載
一些電商網(wǎng)站產(chǎn)品或評(píng)測(cè)網(wǎng)站會(huì)為用戶提供產(chǎn)品對(duì)比的功能,用戶只需勾選多個(gè)需要對(duì)比的產(chǎn)品,就可以進(jìn)行比對(duì),下文給大家?guī)?lái)了jQuery實(shí)現(xiàn)產(chǎn)品對(duì)比功能,一起看下吧2016-08-08jquery實(shí)現(xiàn)異步加載圖片(懶加載圖片一種方式)
本篇文章主要介紹了jquery實(shí)現(xiàn)異步加載(懶加載圖片一種方式),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手試一試2022-03-03基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載。這是一款鼠標(biāo)點(diǎn)擊分享按鈕向右滑出騰訊微博,新浪微博,QQ空間,豆瓣,微信,二維碼分享等分享平臺(tái),本段代碼比較實(shí)用,需要的朋友參考下吧2016-01-01Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說(shuō)明與tableUI優(yōu)化
Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說(shuō)明與tableUI優(yōu)化,需要的朋友可以參考下。2010-04-04jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)圖片漸變切換效果的方法,涉及jquery針對(duì)圖片的顯示與隱藏效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01實(shí)用jquery操作表單元素的簡(jiǎn)單代碼
下面小編就為大家?guī)?lái)一篇實(shí)用jquery操作表單元素的簡(jiǎn)單代碼。小編覺(jué)得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jQuery插件bgStretcher.js實(shí)現(xiàn)全屏背景特效
可以自動(dòng)動(dòng)態(tài)更換網(wǎng)頁(yè)背景圖片的jQuery插件bgstretcher.js,sharejs.com推薦的這個(gè)插件,可以自定義多種方式讓網(wǎng)頁(yè)背景自動(dòng)切換,效果流暢,非常難得,調(diào)用代碼也非常簡(jiǎn)單。2015-06-06