0Pricing
jQuery Academy · Lektion

Animationen verketten und in Warteschlangen einreihen

Erkunden Sie, wie Sie mehrere Animationsmethoden verketten und die Animationswarteschlange verwalten, um sequenzielle und koordinierte visuelle Effekte für dynamische Benutzeroberflächen zu erstellen.

Animationen verketten und in Warteschlangen einreihen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung in Animationsverkettungen

Stellen Sie sich vor, Sie möchten ein Element bewegen, dann seine Farbe ändern und es anschließend ausblenden. Diese Schritte manuell nacheinander auszuführen, kann schwierig sein!

Mit der Animationsverkettung in jQuery können Sie mehrere Animationsmethoden miteinander verknüpfen. Jede Animation startet erst, wenn die vorherige abgeschlossen ist, und erzeugt so flüssige, aufeinanderfolgende Effekte.

Grundlegende Syntax für Verkettungen

jQuery-Methoden geben häufig das jQuery-Objekt selbst zurück. Dadurch können Sie direkt für das Ergebnis eine weitere Methode aufrufen und so eine „Kette“ bilden.

Hier bewegt sich ein Feld nach rechts und anschließend nach unten. Probieren Sie es aus!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Komplexe Abläufe erstellen

Sie können viele Animationsmethoden miteinander verketten. jQuery fügt diese Animationen automatisch in eine interne Warteschlange ein und stellt sicher, dass sie in der von Ihnen festgelegten Reihenfolge ausgeführt werden.

So entsteht ein sequenzieller Ablauf für Ihre UI-Elemente. Beobachten Sie, wie sich das Feld bewegt, größer wird und anschließend ausgeblendet wird!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

So funktioniert die Animationswarteschlange

Wenn Sie Animationsmethoden verketten, führt jQuery sie nicht alle gleichzeitig aus. Stattdessen fügt es sie einer speziellen Liste hinzu, der Animationswarteschlange (oder „fx“-Warteschlange).

  • Die erste Animation startet sofort.
  • Nachfolgende Animationen warten in der Warteschlange.
  • Sobald eine Animation abgeschlossen ist, nimmt jQuery automatisch die nächste aus der Warteschlange und startet sie.

So wird sichergestellt, dass Ihre Animationen nacheinander und vorhersehbar ausgeführt werden.

Pausen mit .delay() hinzufügen

Manchmal benötigen Sie zwischen Animationen eine Pause. Die Methode .delay() eignet sich dafür ideal! Sie unterbricht die Ausführung nachfolgender Elemente in der Animationswarteschlange für eine festgelegte Dauer.

Das Feld bewegt sich, pausiert und bewegt sich dann erneut.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

Benutzerdefinierten Code in der Warteschlange ausführen

Mit .queue() können Sie Nicht-Animationsfunktionen direkt in die Warteschlange einfügen. Dadurch können Sie Aktionen, etwa das Ändern eines Textes oder das Hinzufügen einer Klasse, genau zwischen Animationen ausführen.

Die Funktion wird ausgeführt, sobald sie in der Warteschlange an der Reihe ist. Denken Sie daran, innerhalb Ihrer benutzerdefinierten Funktion next() aufzurufen, damit jQuery mit dem nächsten Element in der Warteschlange fortfährt!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

Animationen mit .stop() unterbrechen

Was ist, wenn Sie eine Animation mittendrin stoppen möchten? Die Methode .stop() ist die Lösung. Sie kann die aktuell laufende Animation eines Elements stoppen.

  • .stop(true): Stoppt die aktuelle Animation und leert die gesamte Animationswarteschlange.
  • .stop(false, true): Stoppt die aktuelle Animation und springt zu ihrem Endzustand, leert die Warteschlange jedoch nicht.

Verwenden Sie die Methode mit Bedacht, da sie Ihre sorgfältig geplanten Abläufe unterbrechen kann!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

Mit .finish() zum Animationsende springen

Die Methode .finish() ist eine leistungsfähige Möglichkeit, alle derzeit für ein Element laufenden Animationen sofort abzuschließen und seine Animationswarteschlange zu leeren.

  • Sie entspricht dem Aufruf von .stop(true, true) für alle Animationen.
  • Das Element springt sofort in den Endzustand aller eingereihten Animationen.

Das ist nützlich für „Zurücksetzen“-Buttons oder um ein Element schnell in seinen endgültigen animierten Zustand zu versetzen.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

Verschiedene Effekte verketten

Verkettungen sind nicht nur für .animate() gedacht! Sie können auch viele andere jQuery-Animationsmethoden wie .fadeIn(), .slideUp(), .slideToggle() und weitere verketten.

Auch diese Methoden verwenden dieselbe Animationswarteschlange, sodass Sie problemlos komplexe visuelle Abläufe erstellen können.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

Kurzer Test zu Verkettungen

Betrachten Sie den folgenden jQuery-Code. In welchem Zustand befindet sich #myBox, nachdem auf den Button geklickt wurde?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

Rückblick: Verkettungen und Warteschlangen

Sehr gut! Sie haben gelernt, mithilfe der Animationsverkettung und des Warteschlangenmechanismus von jQuery dynamische, sequenzielle visuelle Effekte zu erstellen.

  • Verkettung: Mehrere Animationsmethoden miteinander verknüpfen.
  • Warteschlange: jQuery verwaltet Animationen in einer Reihenfolge.
  • .delay(): Zwischen Animationen pausieren.
  • .queue(): Benutzerdefinierte Funktionen in die Warteschlange einfügen.
  • .stop(): Die Warteschlange unterbrechen oder leeren.
  • .finish(): Alle eingereihten Animationen sofort abschließen.

Als Nächstes befassen wir uns mit benutzerdefiniertem Easing und Animations-Callbacks, um noch mehr Kontrolle zu erhalten!

Häufig gestellte Fragen

Ist die Lektion „Animationen verketten und in Warteschlangen einreihen“ kostenlos?

Ja — der vollständige Text von „Animationen verketten und in Warteschlangen einreihen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Animationen verketten und in Warteschlangen einreihen“?

Erkunden Sie, wie Sie mehrere Animationsmethoden verketten und die Animationswarteschlange verwalten, um sequenzielle und koordinierte visuelle Effekte für dynamische Benutzeroberflächen zu erstellen. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „Animationen verketten und in Warteschlangen einreihen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Animationen verketten und in Warteschlangen einreihen
  2. Benutzerdefiniertes Easing und Animations-Callbacks
  3. Erweiterte Toggle- und Slide-Effekte
← Zurück zu jQuery Academy