Understand the jQuery stop of method

As front-end developers, JS and JQuery are frequently used as development languages and tool libraries. As we all know, there is a very powerful method in jQuery, stop(), which is a way to prevent repeated accumulation in continuous animations or events. So, how do I use stop()? Let me introduce you to stop() :

Stop () has two arguments syntactically, each with a Boolean Boolean value. All are optional, but there are rules as follows:

$(the selector). Stop (stopAll goToEnd)

Parameters :(by default, if no parameters are written, both parameters are considered false.)

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

GoToEnd: optional. Specifies whether the current animation is allowed to complete. This parameter can only be used when the stopAll parameter is set. So, as we said above, the stopAll parameter we usually write the fasle value, not by default, but actually by the parameter. So the goToEnd parameter has two choices, false and true. I think you get the idea. It's always true. Allows the current animation to complete.

Here 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)"> Began to draw </a> </div>

      </div >

      <div class="img" style="display:none;" > 

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

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

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

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

  </div>

      <div class="img" style="display:none;" > 

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

    <a class="prize_notes" href="javascript:void(0);"> The prize records </a> 

  </div>

    </div>

</div>

 
CSS:

#content{ 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;

}

});

});