Understand jQuery stop () method, jquerystop

Understand jQuery stop () method, jquerystop

As front-end developers, JS and JQuery are frequently used development languages and tool libraries. We all know that there is a very powerful method in jQuery-stop (), which is a way to prevent repeated accumulation in continuous animation or events. So, how to use stop? Let's get to know about stop () first:

The stop () syntax has two parameters, both of which are Boolean values. And are optional, but there are also provisions, as follows:

$ (Selector). stop (stopAll, goToEnd)

Parameter: (by default, if no parameter is specified, both parameters are considered false .)

StopAll: Optional. Specifies whether to stop all animations added to the queue of the selected element. If this parameter is set to true, all subsequent animations or events are stopped. If this parameter is set to 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 to allow the current animation to be completed. This parameter can only be used when the stopAll parameter is set. As we have mentioned above, we generally write the stopAll parameter into the fasle value, not the default value, but the actual value. The goToEnd parameter has two options: false and true. It means that everyone should understand it. It is generally true. This means that the current animation can be completed.

The corresponding code is as follows:

HTML:

Copy codeThe Code is as follows:
<Div id = "content">
<Div class = "slide_box">
<Div class = "img">

<Div class = "start"> <a class = "start_btn" href = "javascript: void (0)"> start lottery </a> </div>
</Div>
<Div class = "img" style = "display: none;">

<A class = "rank_30" href = "javascript: void (0);"> level 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;">

<A class = "prize_notes" href = "javascript: void (0);"> prize record </a>
</Div>
</Div>
</Div>

 
CSS:

Copy codeThe 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. rank_30 {position: absolute; top: 230px; left: 70px; display: block; width: 250px; height: 60px; text-indent:-9999px ;}
# Content div. img. rank_45 {position: absolute; top: 230px; left: 460px; display: block; width: 250px; height: 60px; text-indent:-9999px ;}
# Content div. img. rank_55 {position: absolute; top: pixel PX; left: 170px; display: block; width: 280px; height: 60px; text-indent:-9999px ;}
# Content div. img. prize_notes {position: absolute; top: 470px; right: 50px; display: block; width: 150px; height: 150px; text-indent:-9999px ;}

 

JS_jQuery:

Copy codeThe 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 event accumulation situation encountered when writing a click event effect at work. In the JS section, we use the stop () method. You can remove or change the parameters and try again. Hope to help you. GA