jQuery.animate(): So entwerfen Sie Ani­ma­tio­nen für Ihre Website

Die Methode jQuery.animate() umfasst um­fang­rei­che Mög­lich­kei­ten für die Erzeugung von Effekten und ge­währ­leis­tet eine rei­bungs­lo­se Dar­stel­lung über ver­schie­de­ne Browser hinweg. Diese Vorteile machen es zu einer beliebten Anwendung für Ent­wick­ler und Ent­wick­le­rin­nen, um einfache oder komplexe Ani­ma­tio­nen in Webseiten zu in­te­grie­ren.

Was ist die jQuery.animate()-Methode?

JQuery.animate() ist eine Funktion der jQuery-Bi­blio­thek, die Ani­ma­tio­nen auf Webseiten erstellen kann. Sie be­ein­flusst die CSS-Ei­gen­schaf­ten eines HTML-Elements, bei­spiels­wei­se die Position, Größe, Farbe oder Trans­pa­renz. 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 An­fangs­zu­stän­de der CSS-Ei­gen­schaf­ten zu de­fi­nie­ren, die dann in eine fließende Animation zu be­stimm­ten Ziel­wer­ten übergehen. Ebenso ist es kein Problem, durch jQuery.animate() CSS-Effekte in einem Content-Ma­nage­ment-System zu erstellen, da Sie z. B. jQuery in WordPress schnell und einfach im­ple­men­tie­ren können.

Wenn Sie mehr über die Grund­kon­zep­te 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);

• pro­per­ties: ist ein Objekt, das die CSS-Ei­gen­schaf­ten und Ziel­for­ma­te für die Animation enthält
• duration: gibt die Dauer der Animation in Mil­li­se­kun­den an
• easing: definiert eine Über­gangs­funk­ti­on, um den Verlauf der Animation an­zu­pas­sen
• complete: ist eine optionale Callback-Funktion, die nach Abschluss der Animation auf­ge­ru­fen wird

Welche Arten von Ani­ma­tio­nen sind möglich?

Die jQuery.animate()-Methode besitzt ver­schie­de­ne Optionen zur Steuerung von Ani­ma­tio­nen, ein­schließ­lich Sequenzen, Loops und Easing-Funk­tio­nen.

Se­quen­zi­el­le Ani­ma­tio­nen

Sie können mehrere Ani­ma­tio­nen nach­ein­an­der ausführen, indem Sie die .animate()-Methode mehrmals hin­ter­ein­an­der aufrufen:

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

Durch die Ver­ket­tung wird das Element zuerst 250 Pixel von links und im Anschluss 100 Pixel nach unten ver­scho­ben.

Ani­ma­ti­ons­schlei­fen

Es ist auch möglich, Effekte in Schleifen aus­zu­füh­ren, wenn Sie eine Callback-Funktion verwenden, um die Animation erneut auf­zu­ru­fen:

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

Durch die be­nut­zer­de­fi­nier­te Funktion ani­m­ate­Loop() wird das Element 250 Pixel nach rechts und dann wieder zu­rück­be­wegt.

Easing-Funk­tio­nen

jQuery.animate()-Easing-Funk­tio­nen er­mög­li­chen es Ihnen, den Ge­schwin­dig­keits­ver­lauf der Animation an­zu­pas­sen:

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

In diesem Beispiel erzeugt die „ea­seOut­Boun­ce“-Easing-Funktion einen federnden Effekt beim Animieren des Elements nach rechts.

Ani­ma­tio­nen beim Scrollen

Um eine Animation beim Scrollen der Webseite aus­zu­lö­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() auf­ge­ru­fen. In diesem Fall wird die Hin­ter­grund­far­be auf #ff0000 (Rot) und die linke Position auf 0 gesetzt. Die Animation dauert 1 Sekunde (1.000 Mil­li­se­kun­den).