Understanding jQuery stop() method_jquery

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. And 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:

Copy code The code is as follows:

<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)">Start the lottery</a> </div>
        </div >
<div class="img" style="display:none;" >
<img src="images/page_b.png">
<a class="rank_30" href="javascript:void(0);">Level 30</a>
<a class="rank_45" href="javascript:void(0);">Level 45</a>
<a class="rank_55" href="javascript:void(0);">Level 55</a>
</div>
<div class="img" style="display:none;" >
<img src="images/page_c.png">
<a class="prize_notes" href="javascript:void(0);">Prize Record</a>
</div>
</div>
</div>

CSS:

Copy code The code is as follows:

#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;}/*Modify*/
#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:

Copy code The code is as follows:

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 the accumulation of events encountered when writing a click event effect at work. In the JS part, the stop() method is useful. You can remove or change the parameters and give it a try. Hope it helps everyone. Gaga