Use of the Stop method in jquery

In the foreground page development sometimes we will need some cool effect, this time using the animation in jquery is very simple to achieve.

Recently encountered in the work of a page element movement effect, this is a simple page effect is also very easy to implement.

Used in the use of a stop animation method "Stop ()", previously just used and not too much attention.

These days again, and then opened the document test, unexpectedly also have some new understanding. There's a whole new understanding of this approach, and here's a record of my tests.

The explanation for this method in the jquery document is this:

I. Overview

Stops all animations that are running on the specified element.

If there are animations waiting to be executed in the queue (and Clearqueue is not set to true), they will be executed immediately.

two, no parameters

Scene simulation

Suppose there is an element that needs to be moved in the background and then back to the starting position. There are three buttons on the page that are responsible for "start moving", "Regression with Stop Method", "No Regression with Stop method".

The overall page is as follows:

Test code and effects

1<scripttype="Text/javascript">2         3$(function () {4//Move Right 600px5$("#Button1"). Click (function () {6$("#move"). Stop (). Animate ({left:610}, the); 7             });8//move back immediately (with stop)9$("#Button2"). Click (function () {Ten$("#move"). Stop (). Animate ({left:Ten}, the);  One             }); A//move back 600px to move backward (no stop) -$("#Button3"). Click (function () { -$("#move"). Animate ({left:Ten}, the); the             }); -  -         }); -</script>

View Code

By testing, we're not hard to find.

With stop, when the blue block moves to the right, click the button and the block will return immediately (move to the left).

Without stop, when the blue block moves to the right, click the button and the block will wait until it is completely moved to the specified position before returning (moving to the left).

Test summary

Stop () stops the currently executing animation and causes the subsequent animation to be executed immediately.

three, two parameters or one parameter

To view the document you can see that the parameters are:[Clearqueue],[gotoend] and both are optional and the type is Boolean.

clearqueue: If set to true, the queue is emptied. You can end the animation immediately.

gotoend: Let the currently executing animation finish immediately, and reset the original style of show and hide, call the callback function, and so on.

We can test each of them. The code is as follows:

1<style type= "Text/css" >2 table, tr, TH, TD {3 margin:0px;4 padding:5px;5border-Collapse:collapse;6 border:1px solid black;7         }8 9 . BG {Tenbackground-color: #8FBC8F; One border:1px solid black; A width:1000px; - height:200px; - margin:10px; the position:relative; -         } -  - . Line { + Position:absolute; -background-color: #3b9feb; +         } A  at #linetop { - top:10px; -left:10px;/*width:980px;*/ - height:5px; -         } -</style> in<script type= "Text/javascript" > -  to$(function () { +             //  -  the             varLine ; *  $$ ("#start"). Click (function () {Panax NotoginsengLine = $ ("#linetop"). Animate ({width:980}, 3000) -. Animate ({height:180}, 3000); the             }); +  A  the$ ("#stop"). Click (function () { +$ ("#linetop"). Stop (); -             }); $  $$ ("#stop_true"). Click (function () { -$ ("#linetop"). Stop (true); -             }); the  -$ ("#stop_false"). Click (function () {Wuyi$ ("#linetop"). Stop (false); the             }); -  Wu  -$ ("#stop_true_true"). Click (function () { About$ ("#linetop"). Stop (true,true); $             }); -  -$ ("#stop_true_false"). Click (function () { -$ ("#linetop"). Stop (true,false); A             }); +  the$ ("#stop_false_true"). Click (function () { -$ ("#linetop"). Stop (false,true); $             }); the  the$ ("#stop_false_false"). Click (function () { the$ ("#linetop"). Stop (false,false); the             }); -  in         }); the</script>

View Code

1<body><input type= "button" id= "Start" value= "Action start"/>2<table>3<tr>4<th> Methods </th>5<th> Parameters </th>6<th> Description </th>7<th> Methods </th>8<th> Parameters </th>9<th> Description </th>Ten</tr> One<tr> A<td> -<input type= "button" id= "Stop" value= "Stop ()"/></td> -<td></td> the&LT;TD colspan= "4" > Empty queue, current execution action <span style= "color: #ff6a00; Font-weight:bold; " > Stop </span> immediately. Subsequent actions are no longer executed. -Equivalent to: <span style= "color: #ff6a00; Font-weight:bold; " >stop (false,false) </span> -</td> -</tr> +<tr> -<td> +<input type= "button" id= "Stop_true" value= "Stop (true)"/></td> A<td>[clearQueue]</td> at<td> empty queue, current execution action <span style= "color: #ff6a00; Font-weight:bold; " > Stop </span> immediately. Subsequent actions are no longer executed. </td> -<td> -<input type= "button" id= "Stop_false" Value= "Stop (false)"/></td> -<td>[clearQueue]</td> -<td> do not empty the queue, the current execution action <span style= "color: #ff6a00; Font-weight:bold; " > Stop </span> immediately. Subsequent actions are performed immediately. </td> -</tr> in<tr> -<td> to<input type= "button" id= "Stop_true_true" value= "Stop (true,true)"/> +</td> -<td>[clearQueue],[gotoEnd]</td> the<td> empty queue, current execution action <span style= "color: #150ce6; Font-weight:bold; " > Complete </span> now. Subsequent actions are no longer executed. </td> *<td> $<input type= "button" id= "Stop_false_true" value= "Stop (false,true)"/>Panax Notoginseng</td> -<td>[clearQueue],[gotoEnd]</td> the<td> do not empty the queue, the current execution action <span style= "color: #150ce6; Font-weight:bold; " > Complete </span> now. Subsequent actions are performed immediately. </td> +</tr> A<tr> the<td><input type= "button" id= "Stop_true_false" value= "Stop (true,false)"/></td> +<td>[clearQueue],[gotoEnd]</td> -<td> empty queue, current execution action <span style= "color: #ff6a00; Font-weight:bold; " > Stop </span> immediately. Subsequent actions are no longer executed. </td> $<td><input type= "button" id= "Stop_false_false" value= "Stop (false,false)"/></td> $<td>[clearQueue],[gotoEnd]</td> -<td> do not empty the queue, the current execution action <span style= "color: #ff6a00; Font-weight:bold; " > Stop </span> immediately. Subsequent actions are performed immediately. </td> -</tr> the  -</table>Wuyi<div class= "bg" id= "Div1" > the<div class= "line" id= "Linetop" ></div> -</div> Wu</body>

View Code

We can see the following results

Method	Parameters	Description	Method	Parameters	Description
		Clears the queue and the current execution action stops immediately . Subsequent actions are no longer executed. Equivalent to:Stop (False,false)
	[Clearqueue]	Clears the queue and the current execution action stops immediately . Subsequent actions are no longer executed.		[Clearqueue]	Does not empty the queue, the current execution action stops immediately . Subsequent actions are performed immediately.
	[Clearqueue],[gotoend]	Clears the queue and the current execution action is completed immediately . Subsequent actions are no longer executed.		[Clearqueue],[gotoend]	Does not empty the queue, the current execution action is completed immediately . Subsequent actions are performed immediately.
	[Clearqueue],[gotoend]	Clears the queue and the current execution action stops immediately . Subsequent actions are no longer executed.		[Clearqueue],[gotoend]	Does not empty the queue, the current execution action stops immediately . Subsequent actions are performed immediately.

Iv. notes

In the higher version of jquery, stop also has a usage that is used in conjunction with the queue. For this usage, I am not yet a property, and there is no way to give a good explanation.

Left to be studied slowly later.

The use of stop now is believed to be enough for us only.

Use of the Stop method in jquery