JQuery/Effetti

Gli effetti

Una volta imparati a gestire gli eventi si può cominciare ad applicare i primi effetti alla pagina. I comandi jQuery infatti tipicamente prevedono un selettore, un gestore di eventi legato all'elemento selezionato, e un'action che manipola l'elemento. Questo può avvenire sia con un solo comando, concatenando le varie funzioni, che in più comandi o in un blocco di codice.

Gli effetti permettono di modificare la visibilità degli elementi selezionati, creando piccole animazioni che rendono più piacevole l'user experience all'interno del nostro sito. Tutto questo senza problemi di compatibilità cross-browser e senza usare strumenti proprietari.

Visibilità

Cominciamo dalle funzioni che servono a rendere visibile o a nascondere:

• hide() nasconde l'elemento selezionato, mentre show() lo rende di nuovo visibile.

La sintassi per questi due metodi è:

$(selector).hide(velocità,callback);
$(selector).show(velocità,callback);

Il primo argomento permette di specificare la velocità dell'effetto, e può assumere tre valori possibili: fast, slow, o in millisecondi. Il secondo argomento invece lo vedremo più avanti. Entrambi sono opzionali.

• toggle() alterna la visibilità dell'elemento tra visibile e nascosto

Dissolvenza

Per applicare l'effetto dissolvenza si usano i metodi:

• fadeIn(velocità, callback) che nasconde l'elemento applicando una dissolvenza
• fadeOut(velocità, callback) che rende visibile l'elemento
• fadeToggle(velocità, callback) alterna l'elemento tra fadein() e fadeout()
• fadeTo(velocità, opacità, callback) applica all'elemento una deterimanata opacità.

La sua sintassi è:

$(selector).fadeTo(velocità,opacità,callback)

Il primo parametro in questo caso è required, e può assumere i seguenti valori: fast, slow, o in millisecondi. Il secondo parametro è anch'esso obbligatorio e specifica a quale valore di opacità deve fermarsi l'effetto dissolvenza (può assumere valori compresi tra 0 e 1).

Scorrimento

Gli effetti di sliding servono per applicare un morbido effetto 'rullo', gli elementi compaiono e scompaiono scorrendo lungo la loro altezza come in un 'rallenty'.

• slideDown() fa scendere l'elemento selezionato
• slideUp() fa risalire l'elemento
• slideToggle() alterna all'elemento l'effetto comparsa e scomparsa

Animazioni di elementi HTML

• animate() permette di creare piccole animazioni personalizzate di elementi HTML, manipolando le sue proprietà CSS.

La sua sintassi è:

$(selector).animate({params},velocità,callback);

Il primo parametro è obbligatorio.

Possono essere animate anche più di una proprietà dell'elemento allo stesso tempo. Ad esempio:

$("button").click(function(){
  $("div").animate({
    left:'150px',
    opacity:'0.5',
    height:'250px',
    width:'300px'
  });
});

Si può usare questo metodo per manipolare molte delle proprietà CSS, ma non tutte. Ad esempio per modificare il colore è necessario prima scaricare l'apposito plugin dal sito jQuery.com.

E' importante ricordarsi che quando si usa il metodo animate() le proprietà vanno scritte in modo diverso da come si usa nel foglio di stile, in quanto si adotta la grafia camel-cased, quindi margin-left si scrive marginLeft, ecc.

Ci si può riferire alle proprietà CSS anche partendo dal valore corrente ed effettuando delle operazioni algebriche, inserendo += o -= di fronte al valore del parametro:

$("div").animate({
    left:'150px',
    height:'+=50px',
    width:'+=50px'
  });

Si possono usare anche dei valori predefiniti, come "show", "hide", o "toggle":

$("div").animate({
    height:'toggle',
  });

Un'altra utile applicazione di animate() è mettere "in coda" i vari effetti, in modo che questi vengano eseguiti in sequenza. Infatti scrivendo più metodi animate() jQuery crea una coda interna eseguendoli uno dopo l'altro. Ad esempio:

$("button").click(function(){
    var div=$("div");
    div.animate({left:'150px'},"slow");
    div.animate({fontSize:'2em'},"slow ");
  });

sposta prima il div a sinistra e poi aumenta il font del testo.

Esiste anche un metodo queue() che serve a mettere in coda gli effetti creati senza usare animate().

Interrompere un effetto

Il metodo stop() serve a fermare un effetto o un'animazione prima che sia terminata.

La sua sintassi è:

$(selector).stop(stopAll,goToEnd)

I parametri sono opzionali. Il primo indica se la coda delle animazioni deve essere cancellata; di default il valore è false. Il secondo fa terminare ma allo stesso tempo completare immediatamente l'animazione; di default l'effetto viene terminato senza essere completato.

La funzione di Callback

Il parametro callback che abbiamo visto nella firma dei metodi precedenti, serve a eseguire una funzione dopo che l'effetto è terminato. Infatti di norma jQuery esegue i comandi linea per linea, senza attendere che gli effetti siano finiti e senza creare una coda interna. Questo può creare un risultato diverso da quello voluto.

Inserendo il paramatro callback jQuery aspetterà che l'effetto sia terminato prima di eseguire il callback e gli alti metodi.

La sintassi è:

$(selector).method(speed,callback)

Ad esempio:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("Il paragrafo ora è nascosto");
  });
});

L'alert comparirà solo quando il paragrafo sarà completamente nascosto. Senza il callback l'alert comparirebbe immediatamente.