Il metodo animate() di jQuery

Il metodo animate() di jQuery è il metodo principale per creare animazioni personalizzate. Vediamolo in dettaglio.

Sintassi di base

$(elemento).animate(stili, durata, easing, callback)

• stili: un oggetto letterale contenente i nomi e i valori delle proprietà CSS da animare
• durata: la durata dell'animazione, espressa in millisecondi
• easing: l'algoritmo di easing che regola la progressione dell'animazione. jQuery supporta nativamente i valori swing (predefinito) e linear, ma è possibile aggiungere altri valori, ad esempio con il plugin jQuery Easing o con jQuery UI
• callback: la funzione che viene eseguita quando l'animazione è completa.

Gli stili CSS supportati al meglio al momento sono:

1. larghezze e altezze
2. posizionamento
3. margini e padding
4. visibilità, con l'aggiunta dei valori custom hide, show e toggle
5. opacità

Nei valori CSS, questo metodo supporta una sintassi incrementale, ad esempio '+=valore' per aumentare il valore corrente e '-=valore' per diminuirlo.

I numeri senza unità di misura vengono interpretati come pixel in quelle proprietà CSS che supportano le unità di misura.

Esempio:

animate.click(function() {
    test.animate({
        left: 20,
        padding: '1em',
        opacity: 0.5,
        margin: '1em 0',
        width: '5em',
        height: '5em'
    }, 1000, function() {
        alert('Complete');
    });
});​