jQuery-Effekt - animate() Methode

jQuery Effekt Reference Manual

Beispiel

Ändere die Höhe des "div"-Elements:

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

Versuche es selbst

Definition und Verwendung

Die Methode animate() führt eine benutzerdefinierte Animation für ein CSS-Attributset aus.

Diese Methode ändert ein Element von einem Zustand in einen anderen durch CSS-Styles. Die CSS-Werte ä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").

Bemærkninger:Verwende "+=" oder "-=", um relative Animationen (relative animations) zu erstellen.

Syntax 1

$(selector).animate(styles,speed,easing,callback)
Parametre Beskrivelse
styles

Erforderlich. Definiert die CSS-Styles und -Werte, die die Animation erzeugen.

Mögliche CSS-Werte (Beispiel)

Bemærkninger:CSS-stil bruger DOM-navn (f.eks. "fontSize") til at indstille, ikke CSS-navn (f.eks. "font-size")
speed

Valgfri. Angiver hastigheden på animationen. Standard er "normal"

Måske værdier:

  • millisekunder (f.eks. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Valgfri. Angiver easing-funktioner til forskellige punkter i animationen

Indbyggede easing-funktioner:

  • swing
  • linear

Udvidelsesplugins tilbyder flere easing-funktioner.
callback

Valgfri. Funktion, der skal udføres efter afslutningen af animate-funktionen

For at lære mere om callback, besøg vores jQuery Callback Dette kapitel.

Syntaks 2

$(selector).animate(styles,options)
Parametre Beskrivelse
styles Obligatorisk. Angiver CSS-stil og værdier, der skal bruges til at skabe animationseffekter (som ovenfor)
options

Valgfri. Angiver ekstra indstillinger for animationen

Måske værdier:

  • speed - indstiller hastigheden på animationen
  • easing - angiver den easing-funktion, der skal bruges
  • callback - angiver funktionen, der skal udføres efter afslutningen af animationen
  • step - angiver funktionen, der skal udføres efter hvert trin i animationen
  • queue - et boolesk værdi. Angiver om animation skal placeres i en effektkø. Hvis det er false, vil animationen starte med det samme
  • specialEasing - fra styles Kortlægning af en eller flere CSS-egenskaber og deres tilsvarende easing-funktioner

jQuery Effekt Reference Manual