Understanding the jQuery stop() method

Purpose of this article: In order to understand the usage of stop(), let’s take an example and look at it in an intuitive way. It is very simple and practical. Friends who need it can refer to

As front-end developers, JS and JQuery are the 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 also regulations, as follows:

$(selector).stop(stopAll,goToEnd)

Parameters: (By default, if no parameters are written, it will be Both parameters are 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:

; ##        

Start the lottery

                                                                                                                                             Level 30 ; Level 45 Level 55

 

 
  Prize Record

CSS:

The code is as follows:

#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:-9999px; margin:0 auto;}/*Modify*/#content p . img a.rank_30{ position:absolute; top:230px; left:70px; display:block; width:250px; height:60px; text-indent:-9999px;}#content p .img a.rank_45{ position :absolute; top:230px; left:460px; display:block; width:250px; height:60px; text-indent:-9999px;}#content p .img a.rank_55{ position:absolute; top:430px ; left:170px; display:block; width:280px; height:60px; text-indent:-9999px;}#content p .img a.prize_notes{ position:absolute; top:470px; right:50px; display :block; width:150px; height:150px; text-indent:-9999px;}

JS_jQuery:

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.

The above is the detailed content of Understanding the jQuery stop() method. For more information, please follow other related articles on the PHP Chinese website!