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.

Tipp

Sie benötigen Webspace? Bei IONOS erhalten Sie eine Speicherkapazität von mindestens 50 GB, kostengünstige Optionen und eine breite Palette an Funktionen für individuelle Anforderungen. Starten Sie noch heute und bringen Sie Ihre Website online.

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

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

$(selector).animate({properties}, duration, easing, complete);
jQuery
  • 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
Tipp

Mit der IONOS API können Sie das volle Potenzial Ihrer IONOS-Dienste verwenden. Skalierbarkeit, Integration von Systemen und Automatisierung – die IONOS API bietet Ihnen die Flexibilität und Kontrolle, um Ihre IONOS Hosting-Produkte optimal zu nutzen.

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'});
jQuery

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();
jQuery

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');
jQuery

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);
   }
});
jQuery

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).

Tipp

Durch Deploy Now von IONOS können Sie den Bereitstellungsprozess Ihrer Webseite oder Webanwendung beschleunigen. Alle erforderlichen Ressourcen, wie Serverinstanzen, Datenbanken und Domains werden automatisch für Sie eingerichtet. Dadurch sparen Sie wertvolle Zeit und können sich auf die eigentliche Entwicklung konzentrieren.