Gli ultimi tutorial di sviluppo web
 

jQuery animate() Method

<Metodi jQuery Effect

Esempio

"Animare" un elemento, cambiando la sua altezza:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Prova tu stesso "

Definizione e utilizzo

Il animate() metodo esegue un'animazione personalizzata di un insieme di proprietà CSS.

Questo metodo modifica di un elemento da uno stato all'altro con gli stili CSS. Il valore della proprietà CSS è cambiata gradualmente, per creare un effetto animato.

Solo i valori numerici possono essere animati (come "margin:30px" ). I valori stringa non possono essere animati (come "background-color:red" ), fatta eccezione per le stringhe "show", "hide" e "toggle" . Questi valori consentono nascondere e mostrare l'elemento animato.

Suggerimento: Utilizzare "+=" "-=" "+=" "-=" Per le animazioni relative.

Sintassi

(selector).animate({styles},speed,easing,callback)

Parametro Descrizione
styles Richiesto. Specifica uno o più CSS proprietà / valori da animare.

Nota: I nomi di proprietà devono essere cammello-carter quando viene utilizzato con il animate() metodo: Dovrete scrivere paddingLeft invece di padding-left, marginRight invece di margin-right, e così via.

Le proprietà che possono essere animati:


Solo i valori numerici possono essere animati (come "margin:30px" ). I valori stringa non possono essere animati (come "background-color:red" ), fatta eccezione per le stringhe "show", "hide" e "toggle" . Questi valori consentono nascondere e mostrare l'elemento animato.

Tip: animazioni a colori non sono inclusi nella libreria di base jQuery.Se si desidera animare il colore, è necessario scaricare il plug-in Colore animazioni da jQuery.com
speed Facoltativo. Specifica la velocità dell'animazione. Il valore di default è 400 millisecondi

Valori possibili:

  • millisecondi (come 100, 1000, 5000, ecc)
  • "slow"
  • "fast"
easing Facoltativo. Specifica la velocità dell'elemento in diversi punti dell'animazione. Il valore di default è "swing" . Valori possibili:
  • "swing" - si muove più lentamente all'inizio / fine, ma più veloce nel mezzo
  • "linear" - muove in una velocità costante
Tip: Più funzioni di andamento sono disponibili in plugin esterni.
callback Facoltativo. Una funzione da eseguire dopo l'animazione completa. Per ulteriori informazioni su richiamata, si prega di leggere la nostra jQuery richiamata capitolo

sintassi alternativa

(selector).animate({styles},{options})

Parametro Descrizione
styles Richiesto. Specifica uno o più proprietà CSS / valori per animare (vedi valori possibili sopra)
options Facoltativo. Specifica opzioni aggiuntive per l'animazione. Valori possibili:
  • duration - imposta la velocità dell'animazione
  • easing - specifica la funzione di andamento da usare
  • complete - specifica una funzione da eseguire dopo l'animazione completa
  • step - specifica una funzione da eseguire per ogni fase dell'animazione
  • progress - specifica una funzione da eseguire dopo ogni fase dell'animazione
  • queue - un valore booleano che specifica se o non posizionare l'animazione in coda effetti
  • specialEasing - una mappa di una o più proprietà CSS dal > parametro stili, e le loro funzioni corrispondenti allentamento
  • start - specifica una funzione da eseguire quando inizia l'animazione
  • done - specifica una funzione da eseguire quando le estremità di animazione
  • fail - specifica una funzione da eseguire se l'animazione non riesce a completare
  • always - specifica una funzione da eseguire se l'animazione si ferma senza completare

Provate voi stessi - Esempi

Utilizzando animate() con una funzione di callback
Come usare animate() con una funzione di callback che si ripete l'animazione.

Alternate Sintassi Esempio
Utilizzando la sintassi alternativa per specificare più stili di animazione e opzioni.

Utilizzando animate() per creare una barra di avanzamento
Come utilizzare il animate() metodo per creare una barra di avanzamento.

Aggiungere scorrimento continuo a ancore pagina
Come usare animate() per aggiungere scorrimento uniforme ai collegamenti.

<Metodi jQuery Effect