Effetti jQuery: sliding e fading

Particolarmente piacevoli alla vista, e sempre in grado di "stupire" l’utente, sono gli effetti di sliding e fading. Entrambe queste tipologie di effetti grafici possono essere facilmente realizzate con jQuery grazie ad una serie di metodi che vi illustrerò in questa lezione.

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, in modo totalmente automatico, 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 metodi inquanto inverte la visibilità dell’elemento cui è applicato alternando slideDown e slideUp a seconda che questo sia nascosto o visibile.

Il funzionamento di questi metodi è il medesimo dei metodi visti nella lezione precedente e per essi valgono le stesse considerazioni. Vediamo un esempio:

$("#bottone").click(function() {
  $("#miaimmagine").slideDown("slow", function() {
    alert('Eccomi...');
  });
});

Se provate a lanciare questo script vedrete che la nostra immagine verrà mostrata "un poco alla volta" ed al termine dell’animazione comparirà un alert di avviso.

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.

Una buona soluzione, quindi, potrebbe essere applicare questo effetto ad elementi posizionati in modo assoluto che vadano ad espandersi o a restringersi senza spostare il resto del layout del sito ma sovrapponendosi ad esso. Ovviamente si tratta di considerazioni puramente estetiche quindi lascio a voi il compito di provare questi effetti e di valutare quale sia la migliore configurazione grafica sulla base delle vostre esigenze di web-design.

Effetti fading

Dopo aver visto gli effetti sliding (che giocano variando l’altezza degli elementi) passiamo ora agli effetti di di tipo fade, cioè quegli effetti che operano variando un’altro attributo CSS: l’opacità dell’immagine. Questi effetti, infatti, modificano la trasparenza dell’elemento selezionato e la riducono o aumentano gradualmente in base alla durata che l’utente imposta. Ricordiamo, infatti, che un elemento con opacità pari a 0 è invisibile mentre è completamente visibile quando questo valore raggiunge 1. L’intervallo compreso tra 0 e 1, quindi, corrisponde ad una semi-trasparenza più o meno accentuata a seconda che il valore sia più vicino alla zero o all’uno.

Come al solito, anche per gli effetti fading, è possibile impostare una durata ed un 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 passando come argomento il valore da applicare alla proprietà opacity;
• .fadeToggle() ([durata],[callback]): effetto che combina .fadeIn() e .fadeTo() e mostra o nasconde un elemento in base al suo stato di visibilità attuale;

Vediamo qualche esempio:

$("#bottone").click(function() {
  $("#miaimmagine").fadeIn("fast", function() {
    alert('Sono comparsa...');
  });
});

Il codice visto qui sopra fa "comparire" un’immagine che prima era invisibile (quindi la nostra immagine deve avere, inizialmente, la proprietà CSS display settata su none oppure opacity settata su 0).

I metodi .fadeOut() e .fadeToggle() non necessitano di ulteriori attenzioni in quanto funzionano esattamente come .fadeIn(). Credo sia necessario, invece, presentare un esempio di .fadeTo():

$("#bottone").click(function() {
  $("#miaimmagine").fadeTo("slow", 0.5, function() {
    alert('Sono comparsa...');
  });
});

Nel nostro esempio abbiamo deciso di utilizzare .fadeTo() in quanto volevamo portare la nostra immagine ad un livello di semi-trasparenza (opacity: 0.5) e pertanto abbiamo specificato tale valore come secondo argomento del metodo.

Si noti che qualora si impostasse la durata dell’animazione a 0

.fadeTo(0, 0.5)

l’utilizzo di questo metodo sarebbe analogo a

.css('opacity',0.5)