Metoda jQuery animate()
Przykład
„Animuj” element, zmieniając jego wysokość:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definicja i użycie
Metoda animate() wykonuje niestandardową animację zestawu właściwości CSS.
Ta metoda zmienia element z jednego stanu do drugiego za pomocą stylów CSS. Wartość właściwości CSS jest zmieniana stopniowo, aby stworzyć animowany efekt.
Tylko wartości liczbowe mogą być animowane (np. „margin: 30px”). Wartości ciągów nie mogą być animowane (np. „background-color:red”), z wyjątkiem ciągów „show”, „hide” i „toggle”. Te wartości pozwalają ukryć i pokazać animowany element.
Wskazówka: użyj „+=” lub „-=” dla animacji względnych.
Składnia
(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 |
Alternatywna składnia
(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:
|
Spróbuj sam — przykład
Jak używać animate() z funkcją zwrotną, która powtarza animację.
alternatywnej składni Użycie alternatywnej składni do określenia wielu stylów i opcji animacji.
Jak używać metody animate() do tworzenia paska postępu.
Jak używać animate(), aby dodać płynne przewijanie do łączy.