Use of stop method in JQuery

In front-end page development, sometimes we need some cooler effects. At this time, it is very simple to use animation in JQuery to achieve it.

Recently I encountered an effect of moving page elements at work. This is a simple page effect and very easy to implement.

In use, a method "stop()" is used to stop the animation. I only used it before and didn't pay too much attention to it.

I encountered it again in the past few days, so I opened the document and tested it, and I actually gained some new insights. I have a new understanding of this method and record my tests here.

The explanation of this method in the JQuery documentation is as follows:

1. Overview

Stop all animations 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.

2. No parameters

Scene simulation

Suppose there is an element that needs to be moved in the background and then returned to the starting position. There are three buttons on the page, which are responsible for "start moving", "return using the stop method", and "return without using the stop method".

The overall page rendering is as follows:

Test code and effect

##

 1 <script type="text/javascript"> 2          3         $(function () { 4             //向右移动600px 5             $("#Button1").click(function () { 6                 $("#move").stop().animate({ left: 610 }, 3000); 
 7             }); 8             //立即往回移动（有stop） 9             $("#Button2").click(function () {10                 $("#move").stop().animate({ left: 10 }, 3000); 
11             });12             //移动完600px，才会往回移动（没有stop）13             $("#Button3").click(function () {14                 $("#move").animate({ left: 10 }, 3000);15             });16 17         });18     </script>

View Code

Through testing, it is not difficult to find that

has a stop. When the blue square is moving to the right, click the button and the square will immediately go back (move to the left).

There is no stop. When the blue square is moving to the right, click the button and the square will

wait until it has completely moved to the designated position before moving back (towards move left).

Test summary

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

3. Two parameters or one parameter

Looking at the document, you can know that the parameters at this time are:

[clearQueue],[gotoEnd] and they are all available Select, the type is Boolean.

clearQueue: If set to true, the queue will be cleared. Animation can be ended immediately.

gotoEnd: Let the currently executing animation be completed immediately, reset the original styles of show and hide, call callback function, etc.

We can test them one by one. The code is as follows:

##

 1 <style type="text/css"> 2         table, tr, th, td { 3             margin: 0px; 4             padding: 5px; 5             border-collapse: collapse; 6             border: 1px solid black; 7         } 8  9         .bg {10             background-color: #8FBC8F;11             border: 1px solid black;12             width: 1000px;13             height: 200px;14             margin: 10px;15             position: relative;16         }17 18         .line {19             position: absolute;20             background-color: #3b9feb;21         }22 23         #linetop {24             top: 10px;25             left: 10px; /*width:980px;*/26             height: 5px;27         }28     </style>29     <script type="text/javascript">30 31         $(function () {32             // 33 34             var line;35 36             $("#start").click(function () {37                 line = $("#linetop").animate({ width: 980 }, 3000)38                                     .animate({ height: 180 }, 3000);39             });40 41 42             $("#stop").click(function () {43                 $("#linetop").stop();44             });45 46             $("#stop_true").click(function () {47                 $("#linetop").stop(true);48             });49 50             $("#stop_false").click(function () {51                 $("#linetop").stop(false);52             });53 54 55             $("#stop_true_true").click(function () {56                 $("#linetop").stop(true, true);57             });58 59             $("#stop_true_false").click(function () {60                 $("#linetop").stop(true, false);61             });62 63             $("#stop_false_true").click(function () {64                 $("#linetop").stop(false, true);65             });66 67             $("#stop_false_false").click(function () {68                 $("#linetop").stop(false, false);69             });70 71         });72     </script>

View Code

 1 <body><input type="button" id="start" value="动作开始" /> 2     <table> 3         <tr> 4             <th>方法</th> 5             <th>参数</th> 6             <th>说明</th> 7             <th>方法</th> 8             <th>参数</th> 9             <th>说明</th>10         </tr>11         <tr>12             <td>13                 <input type="button" id="stop" value="stop()" /></td>14             <td></td>15             <td colspan="4">清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。16                 等同于：<span style="color:#ff6a00; font-weight:bold;">stop(false,false)</span>17             </td>18         </tr>19         <tr>20             <td>21                 <input type="button" id="stop_true" value="stop(true)" /></td>22             <td>[clearQueue]</td>23             <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>24             <td>25                 <input type="button" id="stop_false" value="stop(false)" /></td>26             <td>[clearQueue]</td>27             <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>28         </tr>29         <tr>30             <td>31                 <input type="button" id="stop_true_true" value="stop(true,true)" />32             </td>33             <td>[clearQueue],[gotoEnd]</td>34             <td>清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会不再执行。</td>35             <td>36                 <input type="button" id="stop_false_true" value="stop(false,true)" />37             </td>38             <td>[clearQueue],[gotoEnd]</td>39             <td>不清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会立即执行。</td>40         </tr>41         <tr>42             <td><input type="button" id="stop_true_false" value="stop(true,false)" /></td>43             <td>[clearQueue],[gotoEnd]</td>44             <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>45             <td><input type="button" id="stop_false_false" value="stop(false,false)" /></td>46             <td>[clearQueue],[gotoEnd]</td>47             <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>48         </tr> 
49 50     </table> 
51     <p class="bg" id="p1">52         <p class="line" id="linetop"></p>53     </p>54 </body>

View Code

We can see the following sorting results

##[clearQueue]Clear the queue, currently executing Action [clearQueue]If the queue is not cleared, the currently executing action [clearQueue],[gotoEnd]Clear the queue and the current execution action [clearQueue],[gotoEnd] does not clear the queue, the current execution action [clearQueue],[gotoEnd]Clear the queue and the current execution action [clearQueue],[gotoEnd]Does not clear the queue, and the current execution action

Method	Parameters	Description	Method	Parameters	Description
		Clear the queue and the currently executing action stops immediately. Subsequent actions will no longer be executed. Equivalent to: stop(false,false)
		Stop immediately. Subsequent actions will no longer be executed.			stops immediately. Subsequent actions are performed immediately.
		will be completed immediately . Subsequent actions will no longer be executed.			will be completed immediately . Subsequent actions are performed immediately.
		stops immediately. Subsequent actions will no longer be executed.			stops immediately. Subsequent actions are performed immediately.

4. Notes

In higher versions of jQuery, stop is also used in conjunction with queue. For this usage, I am not yet a property, and I cannot give a good explanation here.

Leave it to be studied slowly later.

I believe the current usage of stop is enough for us.

The above is the detailed content of Use of stop method in JQuery. For more information, please follow other related articles on the PHP Chinese website!