jQuery Effetto - metodo animate()

Manuale di riferimento degli effetti di jQuery

Esempio

Cambia l'altezza dell'elemento "div":

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Prova personalmente

Definizione e uso

Il metodo animate() esegue animazioni personalizzate di un set di attributi CSS.

Questo metodo cambia lo stato di un elemento da uno stato all'altro tramite stili CSS. I valori delle proprietà CSS cambiano gradualmente, permettendo di creare un effetto animazione.

Solo i valori numerici possono creare animazioni (ad esempio "margin:30px"). I valori di stringa non possono creare animazioni (ad esempio "background-color:red").

Nota:Usa "+=" o "-=" per creare animazioni relative (animations relative).

Sintassi 1

$(selettore).animate(Stili,velocità,easing,callback)
Parametri Descrizione
Stili

Obbligatorio. Specifica lo stile CSS e i valori che generano l'effetto animazione.

Possibili valori CSS (forniti come esempio):

Nota:Lo stile CSS utilizza il nome DOM (ad esempio "fontSize") per impostare, non il nome CSS (ad esempio "font-size").
velocità

Opzionale. Specifica la velocità dell'animazione. Il valore predefinito è "normale".

Valori possibili:

  • millisecondi (ad esempio 1500)
  • "lento"
  • "normale"
  • "veloce"
easing

Opzionale. Specifica la funzione di easing per impostare la velocità dell'animazione a diversi punti di animazione.

Funzioni di easing integrate:

  • swing
  • lineare

Estensioni di plugin che offrono più funzioni di easing.
callback

Opzionale. Funzione da eseguire dopo l'esecuzione della funzione animate.

Per ulteriori informazioni sui callback, visitare il nostro jQuery Callback Questo capitolo.

Sintassi 2

$(selettore).animate(Stili,Opzioni)
Parametri Descrizione
Stili Obbligatorio. Specifica lo stile CSS e i valori che producono l'effetto animazione (come sopra)
Opzioni

Opzionale. Specifica opzioni aggiuntive per l'animazione

Valori possibili:

  • speed - imposta la velocità dell'animazione
  • easing - funzione di easing da utilizzare
  • callback - funzione da eseguire dopo la completazione dell'animazione
  • step - funzione da eseguire dopo la completazione di ogni passo dell'animazione
  • queue - valore booleano. Indica se inserire l'animazione nella coda degli effetti. Se impostato su false, l'animazione inizierà immediatamente
  • specialEasing - proveniente da Stili Mappatura di uno o più attributi CSS e delle loro funzioni di easing corrispondenti

Manuale di riferimento degli effetti di jQuery