javascript中stop方法有什么作用

這篇文章主要介紹“javascript中stop方法有什么作用”，在日常操作中，相信很多人在javascript中stop方法有什么作用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript中stop方法有什么作用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

javascript中stop方法作用是阻止在連續動畫或事件中出現重復累積狀況的，語法格式為“$(元素).stop是否停止動畫,是否允許完成當前動畫)”。stop()在語法上的兩個參數都是Boolean布爾值。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

作為前端開發人員，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：

<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)">開始抽獎</a> </div>
      </div >
      <div 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> 
  </div>
      <div class="img" style="display:none;" > 
    <img src="images/page_c.png"> 
    <a class="prize_notes" href="javascript:void(0);">獎品記錄</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;

}

});

});

到此，關于“javascript中stop方法有什么作用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！