Ho appena pubblicato un esempio in jQuery che illustra le possibilità offerte dagli step delle animazioni jQuery. Uno step è un singolo componente atomico di un'animazione jQuery. Un'animazione può contenere diversi step, che variano a seconda del tipo di animazione creata e dei suoi parametri. Sostanzialmente, uno step viene gestito internamente dall'oggetto fx di jQuery che lo usa per aggiungere ritardi, accelerazioni e easing. Il metodo animate() fornisce a sua volta il metodo step() tra le sue opzioni che ci consente di eseguire un'azione su ogni step. Vediamo un esempio pratico.
Il metodo animate() di norma viene usato in questo modo:
$(elemento).animate({
left: 100
}, 800, function() {
console.log('Completato');
});
Ma si può anche usare la sintassi estesa utilizzando il secondo oggetto letterale per gestire le sue opzioni:
$(elemento).animate({
left: 100
},
{
duration: 800,
complete: function() {
console.log('Completato');
}
}
);
È proprio in questo oggetto letterale che possiamo usare il metodo step():
$(function() {
$('div', 'body').click(function() {
var width = $(this).width();
var height = $(this).height();
$(this).animate({
left: 100
}, {
step: function() {
$(this).width(width -= 1);
$(this).height(height -= 1);
},
complete: function() {
var width2 = $(this).width();
var height2 = $(this).height();
$(this).animate({
left: 0
},
{
step: function() {
$(this).width(width2 += 1);
$(this).height(height2 += 1);
},
duration: 800
}
);
},
duration: 800
});
});
});
Nell'esempio le dimensioni dell'elemento sono state modificate di un'unità alla volta utilizzando gli step. Ogni step fa aumentare o diminuire le dimensioni dell'elemento.
Altre applicazioni
Gli step possono essere utilizzati per gestire meglio le animazioni simultanee e parallele su più elementi. In ogni step è possibile usare un riferimento ad un elemento diverso da quello selezionato e modificare il suo stato in modo dinamico.