Understanding the jquery Stop () method _jquery

As front-end developers, JS and jquery are the development language and tool class libraries that we often use. As we all know, there is a powerful method in jquery--stop (), which is a way to block repetitive cumulative conditions in consecutive animations or events. So, how does stop () work? Let's get to know the Stop ():

The Stop () has a syntax of two parameters, each of which is a Boolean value. and are optional, but there are provisions as follows:

$ (selector). Stop (Stopall,gotoend)

Parameters: (by default, arguments are not written, and both arguments are considered false.) ）

StopAll: Optional. Specify whether to stop all animation that joins the queue for the selected element. This means that if the value of this argument is true, all subsequent animations or events will be stopped. False to stop only the animation currently being performed by the selected element, and subsequent animations are unaffected. Therefore, this parameter is generally false.

Gotoend: Optional. Specify whether to allow the current animation to complete, which can only be used when the StopAll parameter is set. Above we said, StopAll parameters we will generally write Fasle value, not the default, but the actual write the parameter. Then the Gotoend parameter has two choices, one is false, and the other is true. The meaning, we should all understand. are generally true. This means that the current animation is allowed to complete.

Here is the corresponding code:

Html:

Copy Code code as follows:

<div id= "Content" >
<div class= "Slide_box" >
<div class= "img" >

<div class= "Start" > <a class= "start_btn" href= "javascript:void (0)" > Start draw </a> </div>
</div >
<div class= "img" style= "Display:none;" >

<a class= "rank_30" href= "javascript:void (0);" >30 level </a>
<a class= "rank_45" href= "javascript:void (0);" &GT;45 level </a>
<a class= "rank_55" href= "javascript:void (0);" >55 level </a>
</div>
<div class= "img" style= "Display:none;" >

<a class= "prize_notes" href= "javascript:void (0);" > Trophy Record </a>
</div>
</div>
</div>

Css:

Copy Code code 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 code 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;
}
});
});

Above is in the work to write a Click event effect encountered in the accumulation of events, in the JS section, useful to the Stop () method, you can remove or change the parameters, try. Hope to help you. Quack