0Pricing
jQuery Academy · Lektion

Benutzerdefiniertes Easing und Animations-Callbacks

Implementieren Sie benutzerdefinierte Easing-Funktionen zur Steuerung von Geschwindigkeit und Ablauf einer Animation und nutzen Sie Callbacks, um Code genau beim Abschluss oder bei einem Schritt der Animation auszuführen.

Benutzerdefiniertes Easing und Animations-Callbacks ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Über die grundlegende Animationsgeschwindigkeit hinaus

Bei Animationen geht es nicht nur darum, Elemente zu bewegen, sondern auch darum, wie sie sich bewegen. Easing steuert die Beschleunigung und Abbremsung einer Animation und lässt sie dadurch natürlicher oder dramatischer wirken.

jQuery bietet zwei integrierte Easing-Optionen: 'linear' (konstante Geschwindigkeit) und 'swing' (langsamer Anfang, schnelles Mittelstück, langsames Ende). Doch was ist, wenn Sie mehr benötigen?

Standard-Easing erkunden

Sehen wir uns den Unterschied zwischen den standardmäßigen Easing-Optionen von jQuery an:

  • 'linear': Die Animation bewegt sich vom Anfang bis zum Ende mit konstanter Geschwindigkeit.
  • 'swing': Dies ist die Standardeinstellung. Die Animation beginnt langsam, wird in der Mitte schneller und am Ende wieder langsamer.

Beide Optionen sind einfach, aber oft benötigen Sie mehr Kontrolle über das Verhalten der Animation.

Benutzerdefiniertes Easing mit jQuery UI

Für anspruchsvollere Easing-Effekte verwenden wir häufig Plugins. Eine beliebte Wahl ist die Komponente jQuery UI Easing.

Sie erweitert das jQuery-Objekt $.easing um viele neue Funktionen wie 'easeOutBounce', 'easeInOutQuad' und weitere. Dadurch erhalten Sie eine umfangreiche Bibliothek vordefinierter Bewegungskurven.

Um diese zu verwenden, müssen Sie normalerweise die jQuery-UI-Bibliothek in Ihr Projekt einbinden.

Codebeispiel: Bounce mit EaseOutBounce

Probieren wir eine Animation mit einer benutzerdefinierten Easing-Funktion aus jQuery UI aus. Beachten Sie, wie die Box am Ende abprallt, anstatt einfach abrupt anzuhalten. Dieser Effekt wird mit 'easeOutBounce' erzielt.

(Hinweis: Dieses Beispiel setzt voraus, dass der Kern und die Effekte von jQuery UI eingebunden sind.)

<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1500, 'easeOutBounce'); // Using a jQuery UI easing
      });
    });
  </script>
</body>
</html>

Animations-Callbacks verstehen

Animationen sind asynchron. Das bedeutet, dass Ihr Code weiter ausgeführt wird, während die Animation abläuft. Was ist, wenn Sie nach dem Ende einer Animation etwas tun müssen?

Die jQuery-Methode .animate() akzeptiert eine Callback-Funktion. Am häufigsten wird der Callback complete verwendet.

  • Der Callback complete wird einmal ausgelöst, sobald die Animation des ausgewählten Elements bzw. der ausgewählten Elemente vollständig beendet ist.
  • Er eignet sich ideal, um Aktionen zu verketten oder eine „Fertig“-Meldung anzuzeigen.

Codebeispiel: Der `complete`-Callback

Hier animieren wir eine Box und ändern anschließend ihre Hintergrundfarbe und zeigen eine Meldung an – aber erst, wenn die Animation zu 100 % abgeschlossen ist.

So werden eine konsistente Darstellung und das richtige Timing für nachfolgende Aktionen sichergestellt.

<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #008CBA;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p id="message"></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, 1000, function() { // This is the complete callback
          $(this).css("background-color", "#f44336");
          $("#message").text("Animation complete! Color changed.");
        });
      });
    });
  </script>
</body>
</html>

Der `step`-Callback

Manchmal müssen Sie eine Aktion während einer Animation ausführen, nicht erst am Ende. Genau dafür gibt es den Callback step.

Der Callback step wird für jede animierte Eigenschaft bei jedem Animationsschritt ausgelöst. Er wird kontinuierlich aufgerufen, während die Animation läuft.

Er erhält Argumente wie now (aktueller Wert der Eigenschaft), fx (ein Objekt mit Animationsdetails) und tween (für eine weitergehende Steuerung).

Codebeispiel: Der `step`-Callback

Verwenden wir den Callback step, um die aktuelle Position unserer animierten Box während ihrer Bewegung anzuzeigen.

So sehen Sie, wie Sie Echtzeitaktualisierungen erhalten und auf den Fortschritt einer Animation reagieren können. Wir verwenden dafür speziell das Argument now.

<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: #FFC107;
    position: relative;
    left: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button id="startAnim">Animate</button>
  <p>Current Left Position: <span id="position">0px</span></p>

  <script>
    $(document).ready(function() {
      $("#startAnim").click(function() {
        $("#box").animate({
          left: '250px'
        }, {
          duration: 1500,
          step: function(now, fx) { // This is the step callback
            $("#position").text(now.toFixed(0) + "px");
          }
        });
      });
    });
  </script>
</body>
</html>

Mehrere Callbacks verwenden

Sie können die Callbacks step und complete in derselben Animation verwenden.

Die Methode animate() akzeptiert als zweites Argument ein Optionsobjekt, in dem Sie sowohl duration und easing als auch Callback-Funktionen definieren können.

Dadurch erhalten Sie präzise Kontrolle: Sie können den Fortschritt während der Animation verfolgen und eine abschließende Aktion nach ihrem Ende ausführen.

Callback-Überprüfung

Welcher jQuery-Callback von animate() eignet sich am besten, um einen Fortschrittsbalken während des Ablaufs einer Animation kontinuierlich zu aktualisieren?

Easing und Callbacks: Zusammenfassung

Sehr gut! Sie haben gelernt, wie Sie Ihre jQuery-Animationen erweitern können:

  • Benutzerdefiniertes Easing: Verwenden Sie Plugins wie jQuery UI, um dynamischere Geschwindigkeitskurven als nur 'linear' oder 'swing' anzuwenden.
  • complete-Callback: Führen Sie Code genau dann aus, wenn eine Animation beendet ist.
  • step-Callback: Erhalten Sie Echtzeitaktualisierungen und führen Sie während des Animationsfortschritts wiederholt Aktionen aus.

Mit diesen Werkzeugen erhalten Sie eine wesentlich feinere Kontrolle über den visuellen Ablauf und das Timing interaktiver Webelemente.

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefiniertes Easing und Animations-Callbacks“ kostenlos?

Ja — der vollständige Text von „Benutzerdefiniertes Easing und Animations-Callbacks“ 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 „Benutzerdefiniertes Easing und Animations-Callbacks“?

Implementieren Sie benutzerdefinierte Easing-Funktionen zur Steuerung von Geschwindigkeit und Ablauf einer Animation und nutzen Sie Callbacks, um Code genau beim Abschluss oder bei einem Schritt der… 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 2 von 3.

Wie lange dauert die Lektion „Benutzerdefiniertes Easing und Animations-Callbacks“?

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