Neueste Web-Entwicklung Tutorials
 

jQuery animate() Method

<JQuery Effect Methoden

Beispiel

"Animieren" ein Element, durch seine Höhe ändert:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Versuch es selber "

Definition und Verwendung

Die animate() Methode führt eine benutzerdefinierte Animation aus einer Reihe von CSS - Eigenschaften.

Diese Methode ändert ein Element von einem Zustand in einen anderen mit CSS-Stile. Die CSS-Eigenschaft Wert wird allmählich geändert, einen animierten Effekt zu erzeugen.

Es können nur numerische Werte (wie animiert werden "margin:30px" ). String - Werte können nicht animiert werden (wie "background-color:red" ), mit Ausnahme der Saiten "show", "hide" und "toggle" . Diese Werte erlauben versteckt und zeigt das animierte Element.

Tipp: Verwenden Sie "+=" "-=" "+=" "-=" Für die relative Animationen.

Syntax

(selector).animate({styles},speed,easing,callback)

Parameter Beschreibung
styles Erforderlich. Gibt eine oder mehrere CSS-Eigenschaften / Werte zu animieren.

Hinweis: Die Eigenschaftsnamen Kamel Gefasste sein müssen , wenn sie mit dem verwendeten animate() Methode: Sie müssen paddingLeft anstelle von padding-left, margin anstelle von margin-right zu schreiben, und so weiter.

Eigenschaften, die animiert werden können:


Es können nur numerische Werte (wie animiert werden "margin:30px" ). String - Werte können nicht animiert werden (wie "background-color:red" ), mit Ausnahme der Saiten "show", "hide" und "toggle" . Diese Werte erlauben versteckt und zeigt das animierte Element.

Tipp: Farb Animationen sind nicht im Kern jQuery - Bibliothek enthalten.Wenn Sie Farbe animieren möchten, müssen Sie die zum Download Farbe Animations - jQuery.com Plugin von jQuery.com
speed Optional. Gibt die Geschwindigkeit der Animation. Der Standardwert ist 400 Millisekunden

Mögliche Werte:

  • Millisekunden (wie 100, 1000, 5000, usw.)
  • "slow"
  • "fast"
easing Optional. Gibt die Geschwindigkeit des Elements in verschiedenen Punkten der Animation. Der Standardwert ist "swing" . Mögliche Werte:
  • "swing" - bewegt sich langsamer zu Beginn / Ende, aber schneller in der Mitte
  • "linear" - bewegt sich in einer konstanten Geschwindigkeit
Tipp: Weitere Beschleunigungsfunktionen sind in externen Plugins zur Verfügung.
callback Optional. Eine Funktion ausgeführt werden soll, nachdem die Animation abgeschlossen ist. Um mehr über Callback zu erfahren, lesen Sie bitte unsere jQuery Rückruf Kapitel

Alternative Syntax

(selector).animate({styles},{options})

Parameter Beschreibung
styles Erforderlich. Gibt eine oder mehrere CSS-Eigenschaften / Werte zu animieren (siehe oben möglichen Werte)
options Optional. Gibt zusätzliche Optionen für die Animation. Mögliche Werte:
  • duration - setzt die Geschwindigkeit der Animation
  • easing - die Lockerung Funktion gibt zu verwenden
  • complete - spezifiziert eine Funktion ausgeführt werden soll , nachdem die Animation abgeschlossen
  • step - gibt eine Funktion , für jeden Schritt in der Animation ausgeführt werden
  • progress - gibt eine Funktion nach jedem Schritt in der Animation ausgeführt werden
  • queue - ein Boolescher Wert , der angibt , ob die Animation in der Effekte Warteschlange zu platzieren
  • specialEasing - eine Karte von einem oder mehreren CSS - Eigenschaften aus der > Stile Parameter und ihre entsprechenden Beschleunigungsfunktionen
  • start - eine Funktion spezifiziert ausgeführt werden , wenn die Animation beginnt
  • done - Spezifiziert ausgeführt werden eine Funktion , wenn die Animation endet
  • fail - spezifiziert eine Funktion ausgeführt werden soll , wenn die Animation nicht abgeschlossen werden kann
  • always - gibt eine Funktion ausgeführt werden , wenn die Animation stoppt ohne Abschluss

Probieren Sie es selbst - Beispiele

Mit animate() mit einer Callback - Funktion
Wie zu verwenden animate() mit einer Callback - Funktion, die die Animation wiederholt.

Alternative Syntax Beispiel
Mit der alternativen Syntax mehrere Animationsstilen und Optionen festlegen.

Mit animate() einen Fortschrittsbalken zu schaffen
Wie das zu verwenden , animate() Methode ein Fortschrittsbalken zu erstellen.

In smooth scrolling auf Seite Anker
So verwenden Sie animate() smooth scrolling zu Links hinzufügen.

<JQuery Effect Methoden