Metoda jQuery animate() .
Příklad
"Animace" prvku změnou jeho výšky:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definice a použití
Metoda animate() provádí vlastní animaci sady vlastností CSS.
Tato metoda mění prvek z jednoho stavu do druhého pomocí stylů CSS. Hodnota vlastnosti CSS se mění postupně, aby se vytvořil animovaný efekt.
Animovat lze pouze číselné hodnoty (např. „margin:30px“). Hodnoty řetězců nelze animovat (např. "barva pozadí:červená") s výjimkou řetězců "show", "hide" a "toggle". Tyto hodnoty umožňují skrytí a zobrazení animovaného prvku.
Tip: Pro relativní animace použijte "+=" nebo "-=".
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 |
Alternativní syntaxe
(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:
|
Zkuste si to sami - příklad
Jak používat animate() s funkcí zpětného volání, která opakuje animaci.
alternativní syntaxe Použití alternativní syntaxe k zadání více stylů a voleb animace.
Jak použít metodu animate() k vytvoření ukazatele průběhu.
Jak používat animate() k přidání plynulého rolování k odkazům.