jQuery: cosa sono gli step in un'animazione

jQuery: cosa sono gli step in un'animazione

Ogni animazione jQuery è suddivisa in atomi di tempo chiamati step. Ciascuno step può anche essere considerato come l'unità di misura base di un animazione.

Quando creiamo un'animazione, viene automaticamente creata una sequenza di step che porterà jQuery a variare una proprietà CSS dell'elemento dallo stato iniziale a quello finale.

Quando scriviamo:


$( "#test" ).animate({ width: 200 });

jQuery legge la proprietà width iniziale dell'elemento (per esempio 0) e crea la sequenza di step che porterà l'elemento ad avere la larghezza finale di 200 pixel. In questo caso, poichè non è stata specificata una velocità per l'animazione, jQuery userà il valore fast come valore iniziale.

A questo punto jQuery crea la sequenza di step rapportandola con la velocità specificata in modo da creare l'effetto di una maggiore o minore velocità dell'animazione. Un'animazione con un parametro di velocità inferiore ha più step di un'animazione che ha un parametro di velocità più elevato.

Gli step servono anche per tener traccia dell'inizio e della fine dell'animazione. Possiamo accedere a tali step usando il secondo oggetto letterale del metodo animate():


$( "#test" ).animate(
  { width: 200 }, 
  { step: function() { //... } 
} );

Il metodo step() non ha un'utilità immediata.

Torna su