C’è chi sostiene che jQuery é stato pensato e costruito per animare. Sostanzialmente non posso che concordare anche perché le funzioni e gli strumenti messi a disposizione per realizzare questo esistono e son anche numerosi.
Il ruolo centrale, comunque,lo riveste senza dubbio la funzione animate(). Applicata ad un qualsiasi elemento della pagina consente di animare l’elemento stesso con tutta una serie di proprietà css e di creare effetti davvero spettacolari, se così possiamo dire.
Scendiamo in dettaglio.
Animazioni ed effetti in jQuery
Vediamo la sintassi della funzione animate() :
.animate( properties, [ duration ], [ easing ], [ complete ] )
dove :
properties : elenco di proprietà CSS per l’animazione.
duration : Stringa o numero che determina la durata dell’animazione
easing : Stringa che indica la funzione di easing da utilizzare.
complete : Funzione da chiamare una volta che l’animazione é terminata.
Un esempio banalissimo, ma che già rende decisamente l’idea é il seguente :
$(‘p’).animate( {
padding: ‘30px’,
borderRight: ‘3px solid #bfbfbf’
}, 1000 );
Capite, già da queste prime righe, le potenzialità di questa funzione per creare animazioni ed effetti in jQuery, ma ora entriamo nel dettaglio dei 4 parametri della funzione ricordando che solo il primo é obbligatorio.
properties : come detto sopra e come si evince dall’esempietto, si tratta di elencare una o più proprietà css da applicare all’elemento specifico da animare con la sintassi chiave/valore. Unica differenza e annotazione, rispetto alla sintassi delle proprietà classiche css é che nella funzione animate vanno inserite senza il – e con l’iniziale della seconda parola maiuscola. Quindi margin-left diventerà marginLeft, border-right diverrà borderRight e così via
duration : durata dell’effetto o dell’animazione che potrete esprimere come numero (millisecondi) o come stringa (tre valori a disposizione : ‘slow’, ‘normal’ o’ ‘fast’)
easing : si riferisce all’accelerazione e decelerazione da utilizzare durante l’animazione per rendere l’effetto più naturale possibile. Due soli valori consentiti : linear e swing. Eccovi, nell’immagine qui sotto, cosa si intende a livello di funzione in relazione ai due valori :
complete : Se occorre, potrebbe servire una funzione di callback richiamata, appunto, ad animazione completata. Utile, ad esempio, per richiamare più animazioni in sequenza o altro.
In questo articolo abbiamo solo visto un pò di teoria e assaggiato le potenzialità della funzione animate. Nei prossimi, esempi specifici vi mostreranno in modo ancora più chiaro ed evidente quello che si può realizzare.
