A brief analysis of JQuery stop ()

As front-end developers,JS and JQuery are the common development language and tool libraries we use. As we all know, there is a very powerful method in jQuery -Stop (), which is a way to block the repetition of cumulative state in a continuous animation or event. So, how doesstop () work? Small size brother to take you first meet stop () it:

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

$ (selector). Stop (Stopall,gotoend)

parameters:( By default, the parameter is not written, it is assumed that both parameters are false.) )

stopall: Optional. Specifies whether to stop all queue-join animations for the selected element. This means that if the parameter value is true, all subsequent animations or events are stopped. If the value of this parameter is false, only the animation currently performed 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, which can only be used when the StopAll parameter is set. Above we said, StopAll parameter we will generally write Fasle value, not the default, but the real write on this parameter. Then the Gotoend parameter has two options, one is false and the other is true. Everyone should understand the meaning of it. is generally true. This means that the current animation is allowed to complete.

Here is the corresponding code:

Html:

<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 Grade </a>

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

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

</div>

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

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

</div>

</div>

</div>

Css:

#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:

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 small code brother in the work to write a Click event effect encountered when the accumulation of events, in the JS section, useful to the Stop () method, you can remove or change parameters, try. We hope to help you. Rattle

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1580062

A brief analysis of JQuery stop ()