Studiare un aspetto grafico piacevole è uno delle primarie esigenze di ogni web designer che si rispetti. Nella fase di progettazione del layout di un sito web si cerca sempre, quindi, di realizzare un "contenitore" che, oltre ad essere funzionale ed usabile, sia anche piacevole alla vista, magari aggiungendo delle animazioni o degli effetti in grado di migliorare la user experience degli utenti nonchè la loro percezione complessiva circa la qualità del nostro lavoro.
Al fine di ottenere un simile risultato fino a poco tempo fa molti web designer ricorrevano a soluzioni proprietarie come Adobe Flash, ma oggi il ricorso a Javascript sembra la soluzione preferibile: adottando un framework come jQuery, inoltre, sarà possibile realizzare effetti grafici d’impatto scrivendo poco codice e con la certezza che questi siano cross-browser (non ci sono problemi di compatibilità tra i diversi browser) e, molto spesso, cross-device.
Con jQuery si possono ottenere effetti di movimento, di transizione, attenuazione e molti altri: tutto questo è reso possibile da diversi metodi nativi di jQuery che, soprattutto grazie all’interazione coi CSS, consentono di applicare i più svariati effetti agli elementi della pagina. L’unico limite è nella fantasia dello sviluppatore: combinando insieme i diversi metodi, infatti, è possibile ottenere risultati davvero stupefacenti che poco hanno da invidiare a tecnologie "d’impatto" come il già citato Flash!
Volendo mantenere un certo ordine espositivo, andremo a dividere gli effetti in quattro categorie che analizzeremo separatamente:
- mostrare e nascondere un elemento
- sliding
- fading
- animazioni
Mostrare e nascondere un elemento
Questa categoria di effetti comprende alcuni semplici metodi che permettono di visualizzare o nascondere un elemento. I metodi di questa famiglia consentono una personalizzazione della durata (espressa in millisecondi o con le stringhe "slow", "normal", "fast") e la possibilità di associare un callback da eseguire al termine dell’effetto.
Di seguito l’elenco dei metodi di questa famiglia:
- .show() ([durata],[callback]): mostra l’elemento selezionato;
- .hide() ([durata],[callback]): nasconde l’elemento selezionato;
- .toggle() ([durata],[callback]): inverte la visibilità attuale dell’elemento (se è visibile lo nasconde, se è nascosto lo mostra);
Vediamo qualche esempio:
1) Mostrare un’immagine nascosta alla pressione su un dato bottone:
$("#bottone").click(function () {
$("#miaimmagine").show("slow",function() {
alert("Ora sono visibile");
});
});L’effetto di .show(), se utilizzato senza specificarne la durata, è equivalente a .css(‘display’,’block’). Viceversa quando viene specificata una durata, come nell’esempio, jQuery esegue un’animazione che agisce sull’altezza, la larghezza e l’opacità dell’elemento.
Nel nostro esempio abbiamo espresso la durata utilizzando la stringa "slow" che corrisponde a 600ms ("fast" corrisponde a 200ms).
2) Nascondere un’immagine visibile al click su un dato bottone:
$("#bottone").click(function () {
$("#miaimmagine").hide("slow",function() {
alert("Ora sono sparita");
});
});L’effetto di .hide(), se utilizzato senza specificarne la durata, è equivalente a .css(‘display’,’none’). Circa la durata valgono le medime considerazioni viste nell’esempio precedente.
3) Applicare .toggle() per mostrare/nascondere un’immagine alla pressione su un bottone:
$("#bottone").click(function () {
$("#miaimmagine").toggle();
});Nell’esempio qui sopra non abbiamo specificato la velocità ne tantomento un callback ma nulla vieta di farlo, esattamente come visto nei due esempi precedenti.
Vediamo, infine, un esempio completo e funzionante:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img border="0" id="miaimmagine" src="foto.jpg"/><br/>
<input type="button" id="bottone" value="Clicca qui!"/>
<script>
$("#bottone").click(function () {
$("#miaimmagine").toggle("slow");
});
</script>
</body>
</html>Si noti che il codice jQuery che gestisce l’effetto è stato inserito direttamente nel body della pagina ma dopo gli elementi interessati. Questo perchè, altrimenti, non sarebbe stato possibile agire su degli elementi non ancora caricati all’interno dell’albero del DOM. Ovviamente avremmo potuto ottenere lo steso risultato utilizzando $(document).ready() come abbiamo già visto nelle passate lezioni.
