jQuery animate() Metodo
Esempio
"Anima" un elemento, modificandone l'altezza:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Definizione e utilizzo
Il metodo animate() esegue un'animazione personalizzata di un insieme di proprietà CSS.
Questo metodo cambia un elemento da uno stato all'altro con gli stili CSS. Il valore della proprietà CSS viene modificato gradualmente, per creare un effetto animato.
Solo i valori numerici possono essere animati (come "margin:30px"). I valori delle stringhe non possono essere animati (come "background-color:red"), ad eccezione delle stringhe "show", "hide" e "toggle". Questi valori consentono di nascondere e mostrare l'elemento animato.
Suggerimento: usa "+=" o "-=" per le animazioni relative.
Sintassi
(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 |
Sintassi alternativa
(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:
|
Provalo tu stesso - Esempio
di callback Come utilizzare animate() con una funzione di callback che ripete l'animazione.
Utilizzo della sintassi alternativa per specificare più stili e opzioni di animazione.
di avanzamento Come utilizzare il metodo animate() per creare una barra di avanzamento.
Come utilizzare animate() per aggiungere uno scorrimento fluido ai collegamenti.