jQuery animate() Methode
Beispiel
"Animieren" Sie ein Element, indem Sie seine Höhe ändern:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definition und Verwendung
Die Methode animate() führt eine benutzerdefinierte Animation einer Reihe von CSS-Eigenschaften durch.
Diese Methode ändert ein Element mit CSS-Stilen von einem Zustand in einen anderen. Der CSS-Eigenschaftswert wird schrittweise geändert, um einen animierten Effekt zu erzeugen.
Nur numerische Werte können animiert werden (wie "margin:30px"). Stringwerte können nicht animiert werden (wie "background-color:red"), mit Ausnahme der Strings "show", "hide" und "toggle". Diese Werte ermöglichen das Ausblenden und Anzeigen des animierten Elements.
Tipp: Verwenden Sie "+=" oder "-=" für relative Animationen.
Syntax
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
Alternative Syntax
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
Probieren Sie es selbst aus - Beispiel
So verwenden Sie animate() mit einer Callback-Funktion, die die Animation wiederholt.
für alternative Syntax Verwendung der alternativen Syntax zur Angabe mehrerer Animationsstile und -optionen.
So verwenden Sie die animate()-Methode zum Erstellen eines Fortschrittsbalkens.
hinzufügen Wie man animate() verwendet, um Smooth Scrolling zu Links hinzuzufügen.