Per concludere il nostro breve escursus tra gli effetti di jQuery vediamo come realizzare delle vere e proprie animazioni per dar vita a degli effetti totalmente personalizzati. Grazie al metodo .animate(), infatti, è possibile agire sulle singole proprietà CSS dell’elemento avendo, di fatto, una assoluta libertà creativa nel realizzare gli effetti di cui realmente abbiamo bisogno.
Esistono due diverse implementazioni del metodo .animate() che, per chiarezza espositiva, tratteremo separatamente.
.animate(parametri,[durata],[andamento],[callback])
Impostare le proprietà CSS che si desidera animare
Nel primo parametro (obbligatorio) vengono impostati le coppie chiave/valore delle proprietà CSS sulle quali si vuole agire: si faccia attenzione però, non è possibile utilizzare qualunque proprietà CSS ma solamente quelle che prevedono un valore numerico. Potremo agire, ad esempio, su proprietà come width, height o left ma non su background-color. E’ possibile impostare l’unità di misura per i valori specificati (%, px, em, …).
Al posto dei valori numerici è anche possibile specificare le stringhe "show", "hide" e "toggle" lasciando quindi a jQuery il compito di automatizzare il tutto.
Importante ricordare la possibilità di utilizzare, in fase di determinazione del valore delle proprietà CSS, gli operatori += e -= che consentono di impostare il valore di una proprietà CSS sommando o sottraendo il valore specificato a quello attuale. Se ad esempio si volesse aumentare la larghezza di 100 pixel scriveremmo:
.animate({ width: '+=100px' })E’ importante ricordare, ancora, che il metodo .animate() supporta la scrittura "camel case" (ovvero a gobba di cammello) per le proprietà composte: se l’attributo è composto da due parole separate da trattino, si uniscono mettendo la prima lettera della seconda parola in maiuscolo (la gobba appunto). Un esempio è l’attributo "margin-left" che diventa marginLeft.
NOTA: è importante ricordare che il metodo .animate(), a differenza dei metodi visti nelle lezioni precedenti, non agisce sulla visibilità di un elemento: questo significa che un elemento nascosto non comparità per il fatto che su di esso si decide di lanciare un’animazione che incide, ad esempio, sulle sue dimensioni.
Impostare durata, easing e callback
Le proprietà CSS specificate nel primo parametro riguardano, ovviamente, il risultato finale, cioè l’aspetto del nostro elemento una volta terminata l’esecuzione dell’animazione. I valori intermedi sono calcolati automaticamente da jQuery in base alla durata scelta, che è appunto il secondo paramentro. La durata può essere espressa, come al solito, in millisecondi oppure con le stringe "fast" o "slow".
Il terzo parametro è una stringa che definisce l’andamento (easing) dell’animazione e, salvo si utilizzino particolari plug-in, il suo valore può essere "swing" (valore di default) o "linear".
Il quarto parametro, infine, definisce la callback da eseguire ad animazione terminata.
Vediamo ora un esempio completo di utilizzo del metodo in oggetto utilizzando questa prima sintassi:
$('#paragrafo').animate(
{
width: '80%',
opacity: 0.5,
marginLeft: '20px'
},
2500,
'linear',
function() {
alert('Animazione terminata')
}
);.animate(parametri, opzioni)
Questa implementazione del metodo .animate() differisce dalla precedente in quanto ha solamente due parametri: il primo parametro sono le proprietà finali del nostro elemento (sempre espresse in formato chiave/valore); il secondo parametro, invece, permette di impostare diverse opzioni di configurazione della nostra animazione.
In merito al primo parametro non c’è nulla da aggiungere rispetto alle considerazioni effettuate poco sopra, in merito al secondo parametro si tratta di un oggetto Javascript in cui è possibile definire diverse coppie di chiave/valore. Vediamo di seguito le chiavi disponibili:
- duration: stringa o numero che permette di definire la durata dell’animazione;
- easing: andamento dell’animazione (come sappiamo il valore di default è "swing");
- queue: valore booleano che permette di definire se l’animazione debba essere inserita nella code delle eventuali altre animazioni oppure no (il valore di default è "true").
- specialEasing: consente di specificare differenti easing per differenti proprietà CSS;
- step: consente di impostare una funzione da eseguire ad ogni step dell’animazione per ciascun elemento animato;
- progress: consente di impostare una funzione da eseguire dopo ogni step dell’animazione;
- complete: consente di impostare una funzione da eseguire al termine dell’animazione;
- start: consente di impostare una funzione da eseguire all’inizio dell’animazione;
- done: consente di impostare una funzione da eseguire al momento della completa e corretta conclusione dell’animazione (tutte le proprietà CSS hanno raggiunto il loro obiettivo);
- fail: consente di impostare una funzione da eseguire in caso di errore durante l’animazione;
- always: consente di impostare una funzione da eseguire alla conclusione dell’animazione (sia in caso di successo che di errore).
Particolarmente interessante è l’opzione queue che serve praticamente a fondere “diverse” animazioni applicate allo stesso elemento; infatti se si hanno diverse animazioni (più chiamate al metodo .animate()) sullo stesso elemento, jQuery le eseguirà una dopo l’altra in sequenza. L’opzione queue se impostata a "false", invece, determina l’inizio immediato dell’animazione la quale viene esclusa dalla coda di esecuzione generata automaticamente da jQuery.
Vediamo un esempio:
$('#start').click(function(){
$('#animazione')
.animate({width:'50%'}, {queue:false, duration: 1000})
.animate({fontSize:'40px'}, 1000)
.animate({borderLeftWidth:'20px'}, 1000);
});Nell’esempio qui sopra jQuery avvierà simultaneamente le prime due animazioni in quanto la prima chiamata di .animate() non incide sulla queue e quindi sia la prima che la seconda animazione partiranno nello stesso momento. La terza, invece, dovrà attendere che la seconda si sia completata in quanto per queste due animazioni è attiva la queue di default.
Essendo la durata delle tre diverse animazioni identica (1 secondo) noteremo come le prime due si fondano completamente mentre la terza avviene al loro completamento. Agendo sulla durata avremmo potuto ottenere un effetto differente, ad esempio:
$('#start').click(function(){
$('#animazione')
.animate({width:'50%'}, {queue:false, duration: 2000})
.animate({fontSize:'40px'}, 1000)
.animate({borderLeftWidth:'20px'}, 1000);
});Come potete vedere ho raddoppiato la durata della prima animazione, così facendo ottengo un effetto più fluido in quanto la seconda animazione si completa quando la prima è a metà (la durata della prima animazione è doppia rispetto a quella delle altre due) e la terza animazione termina in simultanea alla prima.
Per chiarire meglio l’idea vediamo un esempio completo:
<html>
<head>
<style>
div {
background-color: #DDD;
color: #000;
width: 200px;
padding: 5px 0px;
text-align: center;
border: 2px solid green;
margin: 3px;
font-size: 14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" id="go1" value="Animazioni in simultanea"/>
<input type="button" id="go2" value="Animazioni in sequenza"/>
<div id="block1">Blocco N.1</div>
<div id="block2">Blocco N.2</div>
<script>
$("#go1").click(function(){
$("#block1").animate({width:"90%"}, {queue:false, duration:3000})
.animate({fontSize:"24px"}, 1000)
.animate({borderRightWidth:"15px"}, 1000);
});
$("#go2").click(function(){
$("#block2").animate({width:"90%"}, 1000)
.animate({fontSize:"24px"}, 1000)
.animate({borderRightWidth:"15px"}, 1000);
});
</script>
</body>
</html>Come potete notare gli effetti applicati ai due DIV sono i medesimi e medesima è la durata complessiva è la medesima (3 secondi)… ma se provate ad eseguire il codice vedrete una grande differenza: cliccando sul primo bottone, infatti, noterete che le diverse animazioni avvengono in modo più omogeneo, cliccando sul secondo bottone avvengono in sequenza una dopo l’altra.
