Effetto jQuery - Animazione

Il metodo jQuery animate() ti permette di creare animazioni personalizzate.

Dimostrazione dell'effetto



jQuery

jQuery Animazione - Metodo animate()

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

Sintassi:

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

Obbligatorio params Il parametro definisce le proprietà CSS che formano l'animazione.

Opzionale speed Il parametro specifica la durata dell'effetto. Può avere i seguenti valori: "slow", "fast" o millisecondi.

Opzionale callback Il parametro è il nome della funzione eseguita dopo la fine dell'animazione.

Esempio: di seguito è illustrato l'applicazione semplice del metodo animate(); questo sposta l'elemento <div> a sinistra fino a quando la proprietà left è uguale a 250 pixel:

Esempio

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

Prova personalmente

Suggerimento:Per default, tutti gli elementi HTML hanno una posizione statica e non possono essere spostati.

Se si desidera operare la posizione, è necessario ricordare di impostare prima la proprietà CSS position dell'elemento su relative, fixed o absolute!

jQuery animate() - Operazione di più proprietà

Attenzione, durante la generazione dell'animazione è possibile utilizzare più proprietà contemporaneamente:

Esempio

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

Prova personalmente

Suggerimento:Può l'animazione con animate() operare tutte le proprietà CSS?

Sì, quasi! Tuttavia, è necessario ricordare una cosa importante: quando si utilizza animate(), è necessario scrivere tutti i nomi delle proprietà in maiuscole iniziali, ad esempio, è necessario utilizzare paddingLeft invece di padding-left, marginRight invece di margin-right, ecc.

Inoltre, le animazioni di colore non sono incluse nella libreria jQuery di base.

Se si desidera generare animazioni di colore, è necessario scaricare l'estensione Color Animations da jQuery.com.

jQuery animate() - Utilizzo di valori relativi

Si può anche definire un valore relativo (il valore è rispetto al valore corrente dell'elemento). È necessario aggiungere += o -= davanti al valore:

Esempio

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

Prova personalmente

jQuery animate() - Utilizzo di valori predefiniti

Si può anche impostare il valore animato dell'attributo come "show", "hide" o "toggle":

Esempio

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

Prova personalmente

jQuery animate() - Utilizzo della funzione coda

Per default, jQuery fornisce una funzione coda per animazioni.

Questo significa che se si scrivono più chiamate animate() una dopo l'altra, jQuery crea una "coda interna" che contiene queste chiamate di metodo. Poi esegue una chiamata animate alla volta.

Esempio 1

Per nascondere, se si desidera eseguire animazioni diverse una dopo l'altra, dobbiamo utilizzare la funzione coda:

$("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");
);

Prova personalmente

Esempio 2

Esempio seguente sposta l'elemento <div> verso destra e aumenta la dimensione del testo:

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

Prova personalmente