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:
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.
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 willwait until it has completely moved to the designated position before moving back (towards move left).
Test summarystop() stops the currently executing animation and causes subsequent animations to be executed immediately.[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>
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>
We can see the following sorting results
| 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) | |||||
| Clear the queue, currently executing Action | Stop immediately. Subsequent actions will no longer be executed. | If the queue is not cleared, the currently executing action | stops immediately. Subsequent actions are performed immediately. | ||
| Clear the queue and the current execution action | will be completed immediately . Subsequent actions will no longer be executed. | does not clear the queue, the current execution action | will be completed immediately . Subsequent actions are performed immediately. | ||
| Clear the queue and the current execution action | stops immediately. Subsequent actions will no longer be executed. | Does not clear the queue, and the current execution action | stops immediately. Subsequent actions are performed immediately. | ||
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
