"jQuery (Parte QUINTA)"
13. Effetti grafici: mostrare e nascondere un elemento
Studiare un aspetto grafico piacevole è un'esigenze di ogni web designer.Con jQuery è possibile realizzare effetti grafici di rilievo con la certezza
di non avere problemi di compatibilità tra i diversi browser.
Con jQuery si possono ottenere effetti:
di movimento, di transizione, di attenuazione e altro.
Possiamo dividere gli effetti grafici
in quattro categorie
- mostrare e nascondere un elemento
- sliding
- fading
- animazioni
Mostrare e nascondere un elemento
Questa categoria di effetti comprende i 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:
- 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);
1) Mostro un'immagine nascosta:
$("#bottone").click(function () {
$("#miaimmagine").show("slow",function() {
alert("Ora sono visibile");
});
});
2) Nascondo un'immagine visibile:
$("#bottone").click(function () {
$("#miaimmagine").hide("slow",function() {
alert("Ora sono sparito");
});
});
3) Applico toggle() per invertire lo stato di visibilità o meno di un
dato elemento:
$("#bottone").click(function () {
$("#miaimmagine").toggle();
});
Vediamo 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/><br/>
<input type="button" id="bottone" value="Clicca qui!"/>
<script>
$("#bottone").click(function () {
$("#miaimmagine").toggle("slow");
});
</script>
</body>
</html>
risultato del codice:---------------------------
---------------------------
14. Effetti grafici: sliding e fading
Entrambe queste tipologie di effetti grafici possono essere realizzate con jQuery.Effetti sliding
Gli effetti di tipo slide generano un'animazione di discesa o risalita per mostrare o nascondere un elemento il quale compare e scompare some se fosse una sorta di "tenda a rullo" che si srotola e riarrotola per mostrarsi e nascondersi.
Come si può intuire i metodi che permettono questo tipo di effetto giocano molto sulla dimensione verticale dell'elemento da manipolare: ad intervalli temporali (parliamo di millisecondi) viene impostata un'altezza differente così da dare all'utente l'effetto desiderato.
Ovviamente questa operazione è gestita interamente da jQuery che effettua tutti i calcoli necessari sulla base della durata impostata dall'utente; oltre ad impostare una durata, è anche possibile prevedere un callback da eseguire al termine dell'effetto.
Vediamo di seguito i metodi di questa famiglia:
- slideDown ([durata],[callback]): mostra l'elemento con un effetto a comparsa verso il basso;
- slideUp ([durata],[callback]): nasconde l'elemento con un effetto a scomparsa verso l'alto;
- slideToggle ([durata],[callback]): unisce i due precedenti ed inverte la visibilità alternando slideDown e slideUp.
$("#bottone").click(function() {
$("#miaimmagine").slideDown("slow", function() {
alert('Eccomi...');
});
});
Gli effetti sliding, come detto, vanno a modificare dinamicamente le
dimensioni di un elemento e quindi lo sviluppatore deve tenere conto di
questo: infatti si deve prevedere il giusto spazio perché l'elemento sia
mostrato per intero, nelle sue dimensioni finali, altrimenti potrebbero
verificarsi problemi in fase di visualizzazione; inoltre il fatto che ci
sia una variazione e che la dimensione non sia sempre fissa può
comportare un movimento, magari non voluto, degli altri elementi nel
DOM.Effetti fading
Dopo aver visto gli effetti sliding (che giocano variando l'altezza degli elementi) passiamo ora agli effetti di fading che operano variano un'altro attributo: l'opacità dell'immagine.
Questi effetti, infatti, modificano la luminosità dell'elemento selezionato e la riducono o aumentano gradualmente in base alla durata che l'utente imposta. Come al solito è possibile creare una callback da eseguire al termine dell'effetto.
Vediamo i metodi che implementano tali effetti:
- fadeIn ([durata],[callback]): mostra l'elemento desiderato;
- fadeOut ([durata],[callback]): effetto di sbiadimento dell'elemento;
- fadeTo (durata,opacità,[callback]): permette di stabilire l'opacità esatta dell'elemento.
Vediamo un esempio:
$("#bottone").click(function() {
$("#miaimmagine").fadeIn("fast", function() {
alert('Sono comparsa...');
});
});
15. Effetti grafici: creare animazioni personalizzate
Per concludere il nostro breve escursus tra gli effetti grafici 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])
Nel primo parametro (obbligatorio) vengono impostati le coppie chiave/valore (formato JSON) delle proprietà: solamente le proprietà che supportano un valore numerico possono essere utilizzate. Inoltre deve essere utilizzata la scrittura "camel case", ovvero a gobba di cammello: 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.
I valori che vengono specificati riguardano, ovviamente, il risultato finale, cioè l'aspetto del nostro elemento finita l'esecuzione dell'animazione. I valori intermedi sono calcolati 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, come al solito, definisce la callback da eseguire ad animazione terminata.
Vediamo un esempio di utilizzo del metodo in oggetto con parametri e durata:
$('#paragrafo').animate({
width: '80%',
opacity: 0.5,
marginLeft: '20px'
}, 2500);
animate (parametri, opzioni)Questa implementazione 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:
- duration: stringa o numero che permette di definire la durata dell'animazione;
- easing: andamento dell'animazione (come sappiamo il valore di default è "swing");
- complete: funzione da eseguire al completamento dell'animazione;
- step: funzione da eseguire dopo ogni step dell'animazione;
- queue: valore booleano che permette di definire se le animazioni debbano essere fatte contemporaneamente oppure no (il valore di default è "true").
L'opzione queue se impostata a "false" permette di far partire tutte le animazioni contemporaneamente e quindi di avviare manipolazioni su proprietà differenti nel medesimo istante; il risultato finale sarà ovviamente lo stesso, ma il passaggio dallo stato iniziale all'elemento finale sarà più omogeneo e gradevole.
$('#start').click(function(){
$('#animazione').animate({width:'50%'}, {queue:false, duration:2500})
.animate({fontSize:'40px'})
.animate({borderLeftWidth:'20px'});
});
Per chiarire meglio l'idea vediamo un esempio completo:
<html>
<head>
<style>
.divEs01 {
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 class="divEs01" id="block1">Blocco N.1</div>
<div class="divEs01" id="block2">Blocco N.2</div>
<script>
$("#go1").click(function(){
$("#block1").animate({width:"90%"}, {queue:false, duration:3000})
.animate({fontSize:"24px"})
.animate({borderRightWidth:"15px"});
});
$("#go2").click(function(){
$("#block2").animate({width:"90%"}, 1000)
.animate({fontSize:"24px"}, 1000)
.animate({borderRightWidth:"15px"}, 1000);
});
</script>
</body>
</html>
risultato del codice:---------------------------
Blocco N.1
Blocco N.2
---------------------------
Come potete notare gli effetti applicati ai due DIV sono i medesimi e medesima è la durata complessiva (3 secondi)... se provate ad eseguire il codice vedrete, tuttavia, una grande differenza: cliccando sul primo bottone (queue:false) le modifiche al CSS avvengono in simultanea, cliccando sul secondo bottone avvengono in sequenza una dopo l'altra.