Verwendung der Stop-Methode in JQuery

Bei der Front-End-Seitenentwicklung benötigen wir manchmal einige coolere Effekte. Derzeit ist es sehr einfach, Animationen in JQuery zu verwenden, um dies zu erreichen.

Kürzlich bin ich bei der Arbeit auf einen Effekt beim Verschieben von Seitenelementen gestoßen. Dies ist ein einfacher Seiteneffekt und sehr einfach zu implementieren.

Im Einsatz wird eine Methode „stop()“ verwendet, um die Animation zu stoppen. Ich habe sie bisher nur verwendet und ihr nicht allzu viel Aufmerksamkeit geschenkt.

Ich bin in den letzten Tagen wieder darauf gestoßen, habe also das Dokument geöffnet und getestet und dabei tatsächlich einige neue Erkenntnisse gewonnen. Ich habe ein neues Verständnis dieser Methode und protokolliere meine Tests hier.

Die Erklärung dieser Methode in der JQuery-Dokumentation lautet wie folgt:

1. Übersicht

Stoppt alle Animationen, die auf dem angegebenen Element ausgeführt werden.

Wenn in der Warteschlange Animationen auf die Ausführung warten (und „clearQueue“ nicht auf „true“ gesetzt ist), werden sie sofort ausgeführt.

2. Keine Parameter

Szenensimulation

Angenommen, es gibt ein Element, das im Hintergrund bewegt und dann in die Ausgangsposition zurückgebracht werden muss . Auf der Seite gibt es drei Schaltflächen, die für „Bewegung starten“, „Rückkehr mit Stopp-Methode“ und „Rückkehr ohne Stopp-Methode“ zuständig sind.

Die gesamte Seitendarstellung ist wie folgt:

Testcode und Wirkung

 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>

Code anzeigen

Durch Tests ist es nicht schwer, das zu finden

hat angehalten, wenn sich das blaue Quadrat nach rechts bewegt, klicken Sie auf die Schaltfläche und das Quadrat bewegt sich sofort zurück (bewegt sich nach links).

Wenn sich das blaue Quadrat nach rechts bewegt, klicken Sie auf die Schaltfläche und das Quadrat wartet , bis es sich vollständig an die angegebene Position bewegt hat bevor Sie sich zurückbewegen (nach links bewegen).

Testzusammenfassung

stop() stoppt die aktuell ausgeführte Animation und bewirkt, dass nachfolgende Animationen sofort ausgeführt werden.

3. Zwei Parameter oder ein Parameter

Wenn Sie sich das Dokument ansehen, können Sie erkennen, dass die Parameter zu diesem Zeitpunkt sind: [clearQueue],[gotoEnd ] und sie sind alle verfügbar. Wählen Sie, der Typ ist Boolean.

clearQueue: Wenn auf „true“ gesetzt, wird die Warteschlange geleert. Die Animation kann sofort beendet werden.

gotoEnd: Lassen Sie die aktuell ausgeführte Animation sofort abgeschlossen werden, setzen Sie die ursprünglichen Stile des Ein- und Ausblendens zurück, rufen Sie die Rückruffunktion auf usw.

Wir können sie einzeln testen. Der Code lautet wie folgt:

 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>

Code anzeigen

 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>

Code anzeigen

Wir können die folgenden Ergebnisse sehen

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

4. Hinweise

in jQuery Es gibt noch einen anderen Verwendung von Stop in dieser Version, d. h. die Verwendung mit der Warteschlange. Für diese Verwendung bin ich noch kein Eigentum und kann hier keine gute Erklärung geben.

Lassen Sie es in Zukunft langsam lernen.

Ich glaube, dass die derzeitige Verwendung von Stopp für uns ausreicht.

Das obige ist der detaillierte Inhalt vonVerwendung der Stop-Methode in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!