jQuery-Effekt - animate() Methode

jQuery Effekt Referenzhandbuch

Beispiel

Ändern Sie die Höhe des "div"-Elements:

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Versuchen Sie es selbst

Definition und Verwendung

Die Methode animate() führt eine benutzerdefinierte Animation eines CSS-Attributensatzes aus.

Diese Methode ändert ein Element von einem Zustand in einen anderen durch CSS-Styles. Die CSS-Attribute ändern sich schrittweise, um Animationseffekte zu erzeugen.

Nur numerische Werte können Animationen erstellen (z.B. "margin:30px"). Stringwerte können keine Animationen erstellen (z.B. "background-color:red").

Anmerkung:Verwenden Sie "+=" oder "-=", um relative Animationen (relative animations) zu erstellen.

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Parameter Beschreibung
styles

Erforderlich. Definiert die CSS-Styles und -Werte, die den Animationseffekt erzeugen.

Mögliche CSS-Werte (Beispiel)

Anmerkung:CSS-Styles werden mit DOM-Namen (z.B. "fontSize") eingestellt, nicht mit CSS-Namen (z.B. "font-size").
speed

Optional. Geschwindigkeit der Animation angeben. Standard ist "normal".

Mögliche Werte:

  • Millisekunden (z.B. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Optional. Easing-Funktion zur Einstellung der Animationsgeschwindigkeit an verschiedenen Punkten der Animation angeben.

Integrierte Easing-Funktionen:

  • swing
  • linear

Erweiterungs-Plugins bieten mehr Easing-Funktionen.
callback

Optional. Funktion, die nach Abschluss der animate-Funktion ausgeführt wird.

Für mehr Informationen über Callbacks besuchen Sie bitte unsere jQuery Callback Dieses Kapitel.

Syntax 2

$(selector).animate(styles,options)
Parameter Beschreibung
styles Erforderlich. CSS-Styles und -Werte, die den animierten Effekt erzeugen (wie oben beschrieben).
options

Optional. Zusätzliche Optionen für die Animation angeben

Mögliche Werte:

  • speed - Geschwindigkeit der Animation einstellen
  • easing - Funktion, die verwendet werden soll
  • callback - Funktion, die nach Abschluss der Animation ausgeführt wird
  • step - Funktion, die nach Abschluss jedes Schritts der Animation ausgeführt wird
  • queue - Boolescher Wert. Zeigt an, ob der Animation an der Warteschlange platziert wird. Wenn false, beginnt die Animation sofort
  • specialEasing - von styles Abbildung einer oder mehrerer CSS-Attribute und ihrer entsprechenden Easing-Funktionen

jQuery Effekt Referenzhandbuch