jQuery-Effekte - Animation

Die Methode jQuery animate() ermöglicht es Ihnen, benutzerdefinierte Animationen zu erstellen.

Effektvorführung



jQuery

jQuery Animation - Methode animate()

Die Methode jQuery animate() wird verwendet, um benutzerdefinierte Animationen zu erstellen.

Syntax:

$(selector).animate({params},speed,callback);

Erforderlich params Der Parameter definiert die CSS-Eigenschaften, die die Animation bilden.

Optional speed Der Parameter legt die Dauer der Wirkung fest. Es können folgende Werte angenommen werden: "slow", "fast" oder Millisekunden.

Optional callback Der Parameter ist der Name der Funktion, die nach Abschluss der Animation ausgeführt wird.

Der folgende Beispiel zeigt eine einfache Anwendung der Methode animate(); sie bewegt das <div>-Element links, bis die Eigenschaft left den Wert 250 Pixel erreicht.

Beispiel

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Versuchen Sie es selbst

Tipp:Standardmäßig haben alle HTML-Elemente eine statische Position und können nicht verschoben werden.

Wenn Sie die Position bearbeiten möchten, müssen Sie zunächst die CSS-Positionseigenschaft des Elements auf relative, fixed oder absolute setzen!

jQuery animate() - Bearbeitung mehrerer Eigenschaften

Bitte beachten Sie, dass mehrere Eigenschaften gleichzeitig während des Erzeugens der Animation verwendet werden können:

Beispiel

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Versuchen Sie es selbst

Tipp:Kann man mit der Methode animate() alle CSS-Eigenschaften bearbeiten?

Ja, fast genug! Allerdings müssen Sie sich an eine wichtige Regel erinnern: Beim Verwenden von animate() müssen alle Eigenschaftsnamen mit CamelCase-Schreibweise angegeben werden, z.B. müssen Sie padding-left anstatt padding-left verwenden, margin-right anstatt margin-right und so weiter.

Farbanimationen sind ebenfalls nicht im Kern jQuery-Bibliothek enthalten.

Wenn Sie Farbanimationen erstellen möchten, müssen Sie das Color Animations-Plugin von jQuery.com herunterladen.

jQuery animate() - Nutzung relativer Werte

Sie können auch relative Werte definieren (dieser Wert ist relativ zum aktuellen Wert des Elements). Sie müssen vor dem Wert += oder -= hinzufügen:

Beispiel

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Versuchen Sie es selbst

jQuery animate() - Nutzung vorgegebener Werte

Sie können sogar die animierten Werte der Eigenschaften auf "show"、"hide" oder "toggle" setzen:

Beispiel

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Versuchen Sie es selbst

jQuery animate() - Nutzung der Queue-Funktion

Standardmäßig bietet jQuery eine Queue-Funktion für Animationen.

Das bedeutet, wenn Sie mehrere animate() -Aufrufe hintereinander schreiben, erstellt jQuery eine "interne"-Queue, die diese Methodenaufrufe enthält. Dann führen diese animate-Aufrufe nacheinander aus.

Beispiel 1

Verbergen, wenn Sie verschiedene Animationen hintereinander ausführen möchten, müssen wir die Queue-Funktion nutzen:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Versuchen Sie es selbst

Beispiel 2

Nachfolgender Beispiel bewegt das <div>-Element nach rechts und erhöht die Schriftgröße des Textes:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Versuchen Sie es selbst