Use of jquery. Stop ()

Use of the. Stop () for jquery:

Purpose : In order to understand the use of Stop (), for example, an intuitive way to see.

In- kind: a id= "Animater" Div contains a paragraph of text. (The following uses animator to represent the object)

the final full effect of the animation: Animater to the right 800px (this complete process is animation 1), and then, the font gradually become larger (this complete process is animation 2), and then, the transparency gradually reduced to 0 (this complete process is animation 3), The transparency is then gradually restored to 1 (the complete process is animation 4), then the font size becomes 16px and moves to the position of 200px from the left edge (the complete process is animation 5).

Action: Click on the button with different ID to see the effect.

　　Html:

        <DivID= "Animater">Stop () method test</Div>        <DivID= "button">            <inputtype= "button"ID= "Button1"value= "Stop ()"/>            <inputtype= "button"ID= "Button2"value= "Stop (true)"/>            <inputtype= "button"ID= "Button3"value= "Stop (false,true)"/>            <inputtype= "button"ID= "Button4"value= "Stop (true,true)"/>                    </Div>

　　Css:

#animater {    width: 150px;     background:activeborder;     Border: 1px solid black;    /* to move, you set this property */     position: relative;}

　　Jquery:

//to see the effect, the random writing of the animation$ (' #animater '). Animate ({' Right ':-800}, 3000). Animate ({' Font-size ': ' 16px '}, ' Normal '). Animate ({' Font-size ': ' 26px '}, ' Normal '). Animate ({' Font-size ': ' 36px '}, ' Normal '). Animate ({' Font-size ': ' 46px '}, ' Normal '). Animate ({' Font-size ': ' 56px '}, ' Normal '). Animate ({' Opacity ': 0}, ' Normal '). Animate ({' Opacity ': 1}, ' Normal '). Animate ({' Left ': 200,    ' Font-size ': ' 16px '}, ' Normal ');//Click a different button to perform a different action$ (' #button1 '). Click (function() {    //The default parameter is False, regardless of whether to write a false or two false or not write false effect$ (' #animater '). Stop ();}); $(' #button2 '). Click (function() {    //The second parameter defaults to False$ (' #animater '). Stop (true);}); $(' #button3 '). Click (function() {    //$ (' #animater '). Stop (false,true);}); $(' #button4 '). Click (function() {    $(' #animater '). Stop (true,true);});

　　W3school on the note: Stop (stopall,gotoend)

　　

　　My understanding:

1, StopAll is false, does not stop the selected element all join the queue animation, only stop the current animation. When StopAll is true, all animations that join the queue are stopped (such as gotoend to true, jumping directly to the final effect of the current animation).

2, Gotoend is false, not allowed to jump directly to the final effect of the current animation ( should be called to complete the current animation bar ), Gotoend is true, allows to jump directly to complete the final end of the current animation effect.

3, Stop (true) is equivalent to stop (TRUE,FALSE): Stops all queued animations of the selected element.

4. Stop (True,true): Stops all queued animations of the selected element, but allows the current animation to be completed.

5. Stop () is equivalent to stop (FALSE,FALSE): Stops the current animation of the selected element, but allows all animations of the queue to be completed later.

6, Stop (false,true): Immediately end the current animation to the final effect, and then complete all the animation of the queue later.

Each time you run the page, Animater movement, click on a different button, see the following different effects (Animater in the animation 1 o'clock Click):

Click the button button1 (Stop ()), since all two parameters are false. So when the click occurs, Animater does not jump to the final effect of the current animation (animation 1), and goes directly to animation 2, then 3,4,5 the animation. Until the entire animation is complete.

Click the button button1 (Stop (true)), because the first is true, the second is false, so animater immediately all stop, the animation is not moving.

Click the button button1 (Stop (false,true)), because the first one is false, the second is true, so when the click occurs, Animater the current animation (animation 1) stops and Animater jumps directly to the final end of the current animation (animation 1), then performs the following animation (animation 2,3,4,5) normally until the entire animation is complete.

Click the button button1 (Stop (true,true)), since two are all true, so when the click occurs, Animater jumps to the final end of the current animation (animation 1) position, and then all the animations stop.

Actual cases encountered at work:

I made a drop-down menu in the project, when the mouse moved up to the menu display, when the mouse left the menu hidden

If I quickly and continuously move the mouse into the move out menu (that is, when the menu pull is not completed, the mouse moves out of the menu) will produce "animation accumulation", when the mouse stops moving, the accumulated animation will continue to execute until the animation sequence is completed. Workaround:Add stop before writing the animation effect code ( true ， true )，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）。

Use of jquery. Stop ()