首頁 > web前端 > js教程 > 主體

理解jQuery stop()方法

巴扎黑
發布: 2017-06-30 11:32:22
原創
1286 人瀏覽過

本文目的:為了了解stop()的用法,舉個例子,直覺的方式來看看。非常的簡單實用,有需要的小夥伴參考下

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

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

$(selector).stop(stopAll,goToEnd)

參數:(預設情況下,不寫參數,則會被認為兩個參數都是false。規定是否停止被選元素的所有加入隊列的動畫。意思是如果該參數值為true,則會停止所有後續動畫或事件。如果該參數值為false,則只停止被選取元素目前執行的動畫,後續動畫不受影響。因此,此參數一般都為false。

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

下面是對應的程式碼:

HTML:

##複製程式碼

程式碼如下:

##

   

     

    <#g src="images/page_a.png">#a.png">#a.png">#a.png">#a.png">#a.png">#a.png">#a.png">#a.png">#a.png">
       

開始抽獎


     


     
     
   






#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
:-999px;  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 . :absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-999px;}
#content p .img a.rank_55{ position:absolute; ; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}#content p .img a.prize_notes{ position:absolute; top:470px; right:50px; :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()方法,大家可以將參數去掉或改變,試試看。

以上是理解jQuery stop()方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板