Effetti jQuery - Animazione


Con jQuery puoi creare animazioni personalizzate.



jQuery

Animazioni jQuery - Il metodo animate()

Il metodo jQuery animate()viene utilizzato per creare animazioni personalizzate.

Sintassi:

$(selector).animate({params},speed,callback);

Il parametro params richiesto definisce le proprietà CSS da animare.

Il parametro di velocità opzionale specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o millisecondi.

Il parametro di callback facoltativo è una funzione da eseguire al termine dell'animazione.

L'esempio seguente mostra un semplice utilizzo del animate()metodo; sposta un elemento <div> a destra, fino a raggiungere una proprietà left di 250px:

Esempio

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 

Per impostazione predefinita, tutti gli elementi HTML hanno una posizione statica e non possono essere spostati.
Per manipolare la posizione, ricorda di impostare prima la proprietà CSS position dell'elemento su relativa, fissa o assoluta!



jQuery animate() - Manipola più proprietà

Si noti che più proprietà possono essere animate contemporaneamente:

Esempio

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 

È possibile manipolare TUTTE le proprietà CSS con il metodo animate()?

Sì quasi! Tuttavia, c'è una cosa importante da ricordare: tutti i nomi delle proprietà devono essere in maiuscolo di cammello quando vengono utilizzati con il metodo animate(): dovrai scrivere paddingLeft invece di padding-left, marginRight invece di margin-right e così via.

Inoltre, l'animazione a colori non è inclusa nella libreria jQuery principale.
Se vuoi animare il colore, devi scaricare il plug-in Color Animations da jQuery.com.


jQuery animate() - Utilizzo di valori relativi

È anche possibile definire valori relativi (il valore è quindi relativo al valore corrente dell'elemento). Questo viene fatto mettendo += o -= davanti al valore:

Esempio

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); 

jQuery animate() - Utilizzo di valori predefiniti

Puoi anche specificare il valore di animazione di una proprietà come " show", " hide" o " toggle":

Esempio

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
}); 

jQuery animate() - Utilizza la funzionalità della coda

Per impostazione predefinita, jQuery viene fornito con la funzionalità di coda per le animazioni.

Ciò significa che se scrivi più animate()chiamate una dopo l'altra, jQuery crea una coda "interna" con queste chiamate di metodo. Quindi esegue le chiamate animate ONE by ONE.

Quindi, se vuoi eseguire animazioni diverse una dopo l'altra, sfruttiamo la funzionalità della coda:

Esempio 1

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

L'esempio seguente sposta prima l' <div>elemento a destra, quindi aumenta la dimensione del carattere del testo:

Esempio 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 

Esercizi jQuery

Mettiti alla prova con gli esercizi

Esercizio:

Utilizzare il animate()metodo per spostare un elemento <div> di 250 pixel a destra.

$("div").animate({: ''});


Riferimento agli effetti jQuery

Per una panoramica completa di tutti gli effetti jQuery, vai al nostro Riferimento agli effetti jQuery .