Utilisation de la méthode stop dans JQuery

Dans le développement de pages front-end, nous avons parfois besoin d'effets plus sympas. À l'heure actuelle, il est très simple d'utiliser l'animation dans JQuery pour y parvenir.

Récemment, je suis tombé sur un effet de déplacement d'éléments de page au travail. Il s'agit d'un effet de page simple et très facile à mettre en œuvre.

En utilisation, une méthode "stop()" est utilisée pour arrêter l'animation. Je ne l'utilisais qu'avant et n'y prêtais pas trop attention.

Je l'ai retrouvé ces derniers jours, j'ai donc ouvert le document et l'ai testé, et j'ai en fait acquis de nouvelles informations. J'ai une nouvelle compréhension de cette méthode et j'enregistre mes tests ici.

L'explication de cette méthode dans la documentation JQuery est la suivante :

Présentation

Arrête toutes les animations en cours d'exécution sur l'élément spécifié.

S'il y a des animations en attente d'exécution dans la file d'attente (et que clearQueue n'est pas défini sur true), elles seront exécutées immédiatement.

2. Aucun paramètre

Simulation de scène

Supposons qu'il y ait un élément qui doit être déplacé en arrière-plan puis ramené à la position de départ . Il y a trois boutons sur la page, qui sont responsables de « démarrer le mouvement », « revenir en utilisant la méthode d'arrêt » et « revenir sans utiliser la méthode d'arrêt ».

Le rendu global de la page est le suivant :

Test du code et de l'effet

 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>

Afficher le code

Grâce aux tests, il n'est pas difficile de trouver cela

s'arrête, lorsque le carré bleu se déplace vers la droite, cliquez sur le bouton, et le carré reviendra immédiatement en arrière (se déplacera vers la gauche).

Il n'y a pas d'arrêt. Lorsque le carré bleu se déplace vers la droite, cliquez sur le bouton et le carré attendra qu'il se soit complètement déplacé vers la position désignée avant de reculer (vers la gauche).

Résumé du test

stop() arrête l'animation en cours d'exécution et provoque l'exécution immédiate des animations suivantes.

3. Deux paramètres ou un paramètre

En regardant le document, vous pouvez savoir que les paramètres à ce moment sont : [clearQueue],[gotoEnd ] et ils sont tous disponibles Sélectionnez, le type est Booléen.

clearQueue : si défini sur true, efface la file d'attente. L'animation peut être terminée immédiatement.

gotoEnd : laissez l'animation en cours d'exécution se terminer immédiatement, réinitialisez les styles d'affichage et de masquage d'origine, appelez la fonction de rappel , etc.

On peut les tester un par un. Le code est le suivant :

 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>

Voir le 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>

Afficher le code

Nous pouvons voir les résultats suivants

方法	参数	说明	方法	参数	说明
		清空队列，当前执行动作立即停止。后续动作会不再执行。 等同于：stop(false,false)
	[clearQueue]	清空队列，当前执行动作立即停止。后续动作会不再执行。		[clearQueue]	不清空队列，当前执行动作立即停止。后续动作会立即执行。
	[clearQueue],[gotoEnd]	清空队列，当前执行动作立即完成。后续动作会不再执行。		[clearQueue],[gotoEnd]	不清空队列，当前执行动作立即完成。后续动作会立即执行。
	[clearQueue],[gotoEnd]	清空队列，当前执行动作立即停止。后续动作会不再执行。		[clearQueue],[gotoEnd]	不清空队列，当前执行动作立即停止。后续动作会立即执行。

4. Notes

dans jQuery Il y en a un autre utilisation de stop dans cette version, qui consiste à l'utiliser avec une file d'attente. Pour cet usage, je ne suis pas encore une propriété, et je ne peux pas donner ici une bonne explication.

Laissez-le étudier lentement dans le futur.

Je pense que l'utilisation actuelle de stop nous suffit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!