jQuery.animate(): So entwerfen Sie Animationen für Ihre Website

Die Methode jQuery.animate() umfasst umfangreiche Möglichkeiten für die Erzeugung von Effekten und gewährleistet eine reibungslose Darstellung über verschiedene Browser hinweg. Diese Vorteile machen es zu einer beliebten Anwendung für Entwickler und Entwicklerinnen, um einfache oder komplexe Animationen in Webseiten zu integrieren.

Was ist die jQuery.animate()-Methode?

JQuery.animate() ist eine Funktion der jQuery-Bibliothek, die Animationen auf Webseiten erstellen kann. Sie beeinflusst die CSS-Eigenschaften eines HTML-Elements, beispielsweise die Position, Größe, Farbe oder Transparenz. Zudem lässt sie sich effektiv mit anderen jQuery-Methoden wie jQuery.find() oder jQuery.on() verwenden. Mithilfe von jQuery.css() ist es auch möglich, die Anfangszustände der CSS-Eigenschaften zu definieren, die dann in eine fließende Animation zu bestimmten Zielwerten übergehen. Ebenso ist es kein Problem, durch jQuery.animate() CSS-Effekte in einem Content-Management-System zu erstellen, da Sie z. B. jQuery in WordPress schnell und einfach implementieren können.

Wenn Sie mehr über die Grundkonzepte von jQuery lernen möchten, empfehlen wir Ihnen das jQuery-Tutorial in unserem Ratgeber.

Das ist die Syntax der jQuery.animate()-Methode

Der Aufbau von jQuery.animate() ist wie folgt:

$(selector).animate({properties}, duration, easing, complete);

• properties: ist ein Objekt, das die CSS-Eigenschaften und Zielformate für die Animation enthält
• duration: gibt die Dauer der Animation in Millisekunden an
• easing: definiert eine Übergangsfunktion, um den Verlauf der Animation anzupassen
• complete: ist eine optionale Callback-Funktion, die nach Abschluss der Animation aufgerufen wird

Welche Arten von Animationen sind möglich?

Die jQuery.animate()-Methode besitzt verschiedene Optionen zur Steuerung von Animationen, einschließlich Sequenzen, Loops und Easing-Funktionen.

Sequenzielle Animationen

Sie können mehrere Animationen nacheinander ausführen, indem Sie die .animate()-Methode mehrmals hintereinander aufrufen:

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

Durch die Verkettung wird das Element zuerst 250 Pixel von links und im Anschluss 100 Pixel nach unten verschoben.

Animationsschleifen

Es ist auch möglich, Effekte in Schleifen auszuführen, wenn Sie eine Callback-Funktion verwenden, um die Animation erneut aufzurufen:

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

Durch die benutzerdefinierte Funktion animateLoop() wird das Element 250 Pixel nach rechts und dann wieder zurückbewegt.

Easing-Funktionen

jQuery.animate()-Easing-Funktionen ermöglichen es Ihnen, den Geschwindigkeitsverlauf der Animation anzupassen:

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

In diesem Beispiel erzeugt die „easeOutBounce“-Easing-Funktion einen federnden Effekt beim Animieren des Elements nach rechts.

Animationen beim Scrollen

Um eine Animation beim Scrollen der Webseite auszulösen, können Sie das Event jQuery.animate() on scroll nutzen:

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});

Hierbei ist das Scroll-Ereignis an das Fenster gebunden. Bei jedem Scrollen wird die Funktion aktiviert. Zunächst ermittelt $(window).scrollTop() die aktuelle Scroll-Position. Dann wird die Position von myElement mit $("#myElement").offset().top bestimmt. Wenn die Scroll-Position um 300 Pixel höher ist als die Position des Elements, wird jQuery.animate() aufgerufen. In diesem Fall wird die Hintergrundfarbe auf #ff0000 (Rot) und die linke Position auf 0 gesetzt. Die Animation dauert 1 Sekunde (1.000 Millisekunden).