Was bedeutet die JQuery-Animationswarteschlange?

JQuery-Animationswarteschlange ist eine Animationsfunktionswarteschlange, die mehrere Animationsaufgaben zusammenfasst, um sicherzustellen, dass die nächste Aufgabe erst dann gestartet wird, wenn die aktuelle Aufgabe abgeschlossen ist Die Animationsmethode wird für ein JQuery-Objekt aufgerufen. Wenn das Objekt einen Animationseffekt ausführt, werden die nachfolgenden Animationseffekte in eine Warteschlange gestellt und dann wird jede Animation in der Animationswarteschlange nacheinander ausgeführt.

Die Betriebsumgebung dieses Artikels: Windows 10-System, JQuery-Version 3.6.1, Dell G3-Computer.

Was bedeutet die JQuery-Animationswarteschlange?

Die Funktion der Warteschlange besteht darin, dass wir Aufgaben nacheinander zusammenstellen können, um sicherzustellen, dass die nächste Aufgabe erst gestartet wird, wenn die vorherige Aufgabe abgeschlossen ist. Die Aufgaben können hier synchron oder asynchron sein.

Das Animationssystem von jQuery führt eine Funktionswarteschlange aus. Durch das Anwenden von Animationen wie Fade, Slide und Animate auf jQuery-Elemente wird die Funktion standardmäßig in eine FX-Warteschlange verschoben. Wenn wir animate() von jQuery verwenden, können wir im Optionsparameter ein Warteschlangenflag übergeben, um die Animationswarteschlange des aktuellen Elements zu bestimmen, wenn diese Animation gepusht wird. Bei „false“ wird die Animation sofort ausgeführt, ohne auf den Abschluss der aktuellen Warteschlange zu warten.

Es gibt eine Warteschlange für die JQuery-Animation. Wenn die Animationsmethode für das JQuery-Objekt aufgerufen wird und das Objekt einen bestimmten Animationseffekt ausführt, werden die nachfolgenden Animationseffekte in eine Warteschlange gestellt und dann jedes Element in der Animationswarteschlange Eine Animation wird nacheinander ausgeführt.

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

Aber manchmal möchte der Benutzer beim Abspielen der Animation aufhören, sich zu bewegen, oder der Benutzer ist zu diesem Zeitpunkt zur Webseite gesprungen und die Animation muss zu diesem Zeitpunkt nicht mehr verschoben werden wird in der Animationswarteschlange ausgeführt, um den Bedarf zu decken.

stop([clearQueue], [jumpToEnd]);

stop() Diese Funktion kann die Ausführung der Animation durch jedes DOM-Element im aktuellen JQuery-Objekt stoppen. stop hat zwei Parameter und gilt für alle JQuery-Effektfunktionen, einschließlich Slide, Fade und benutzerdefinierte Animationen. (Anzeigen, Ausblenden und Umschalten sind keine Animationen, sondern im Wesentlichen statische Effekte von CSS)

Die Bedeutung dieser beiden Parameter stellt jeweils Folgendes dar:

• clearQueue (Standard: false): ob die Animationswarteschlange gelöscht wird

• jumpToEnd (Standard: false): Gibt an, ob die aktuelle Animation sofort abgeschlossen werden soll Animation abgeschlossen ist oder nicht, direkt überspringen. Dieser Schritt geht zur nächsten Warteschlange, bis alle Animationen in der Warteschlange abgeschlossen sind.

stop(true, false): Wenn die Parameter wahr und falsch sind, bedeutet dies, dass die Animationswarteschlange gelöscht wird und die aktuelle unvollendete Animation nicht mehr fortgesetzt wird.

stop(true, true): Wenn beide Parameter wahr sind, wird die Animationswarteschlange gelöscht, aber die aktuelle Animationsaktion springt direkt zum abgeschlossenen Bildschirm, was bedeutet, dass kein Ausführungsprozess stattfindet und direkt zum Endzustand.

Springen Sie zum letzten Status der Aktion und führen Sie dann keine weiteren Aktionen mehr aus

finish(): Stoppen Sie die aktuelle Animation, löschen Sie alle nicht abgeschlossenen Animationen in der Animationswarteschlange und zeigen Sie schließlich den letzten Frame der Animation an Endzustand der Warteschlange.

Springe direkt von dieser Position zum Endzustand der Animation

Diese Methode ähnelt der .stop(true,true)-Methode, mit der Ausnahme, dass „finish()“ auch dazu führt, dass die CSS-Eigenschaften aller in der Warteschlange befindlichen Animationen aktiviert werden stoppen.

Verwandte Tutorial-Empfehlungen: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeutet die JQuery-Animationswarteschlange?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!