What is the function of stop method in javascript

The stop method in JavaScript is to prevent repeated accumulation in continuous animations or events. The syntax format is "$(element).stop whether to stop the animation and whether to allow the current animation to be completed)". The two syntactic parameters of stop() are Boolean values.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

As front-end developers, JS and JQuery are development languages ​​and tool libraries we often use. We all know that there is a very powerful method in jQuery - stop(), which is a method to prevent repeated accumulation in continuous animations or events. So, how to use stop()? Let’s introduce you to stop() first:

stop() has two parameters in syntax, both of which are Boolean values. They are all optional, but there are regulations, as follows:

$(selector).stop(stopAll,goToEnd)

Parameters: (By default, if no parameters are written, both parameters will be considered false.)

stopAll :optional. Specifies whether to stop all queued animations of the selected element. This means that if the parameter value is true, all subsequent animations or events will be stopped. If the parameter value is false, only the animation currently executed by the selected element will be stopped, and subsequent animations will not be affected. Therefore, this parameter is generally false.

goToEnd: Optional. Specifies whether to allow the current animation to be completed. This parameter can only be used when the stopAll parameter is set. As we said above, we usually write the fasle value for the stopAll parameter, not the default, but the actual parameter. Then there are two options for the goToEnd parameter, one is false and the other is true. Everyone should understand the meaning. Generally true. This means allowing the current animation to be completed.

The following is the corresponding code:

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;

}

});

});

The above is When writing a click event effect at work, I encountered the accumulation of events. In the JS part, the stop() method is useful. You can remove or change the parameters and give it a try. I hope to be helpful.

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of What is the function of stop method in javascript. For more information, please follow other related articles on the PHP Chinese website!