| Effetti Fading |
 |
 |
|
In questa breve guida tratteremo quelli che sono i metodi che permettono di creare un fading di un elemento, ovvero che lavorano sulla luminosità per creare un effetto a comparsa o a scomparsa dell'elemento desiderato. Non vengono quindi, come per l'effetto sliding, modificate le dimensioni, ma solamente la l'opacità dell'elemento. Questa è una cosa importante e l'utente deve tenerne conto in fase di creazione degli elementi e del risultato che vorrà ottenere. Passiamo ora ad illustrare i metodi che permettono di sviluppare tale effetto: fadeIn ()Con questo metodo vengono mostrati tutti gli elementi in accordo la selezione voluta tramite un effetto di sbiadimento, ovvero viene modificata la loro opacità così da passare da invisibili a visibili.La sintassi corretta è la seguente: fadeIn(speed, [callback]). L'opacità è aggiustata automaticamente ed in coerenza con la velocità impostata: accetta due tipi di valori, stringa (slow, normal e fast) o numerico che esprime il ritardo in millisecondi. La callback, parametro opzionale, viene eseguita quando l'effetto è terminato. Vediamo un semplice esempio per far capire che cosa fà questo effetto grafico: $(#click_fadein).click(function () { $("#div_fadein").fadeIn("slow");}); Clicca qui per mostrare il div Come si può vedere da questo semplice esempio, le dimensioni dell'elemento non cambiano. Inoltre non bisogna utilizzare questo metodo su elementi già visibili perchè questo non provocherà nessuna animazione. fadeOut ()Questo metodo è lo speculare al precedente e serve per nascondere elementi già visibili con un effetto opposto a quello visto prima.Molto utile per far sparire elementi con gradualità . La sintassi è la stessa che per il metodo precedente: fadeOut(speed, [callback]). Ovviamente i parametri sono gli stessi e anche qui la velocità setta automaticamente il variare dell'opacità dell'elemento. Passiamo ora a mostrare un semplice esempio: $("#div_fadeout").click(function () { $("#div_fadeout").fadeIn(5000); //5 secondi}); Clicca qui per nascondermi !!! Bisogna stare attendo a non applicare tale metodo ad elementi già nascosti, perchè non avra, naturalmente, nessun effetto. fadeTo ()Questo metodo differisce dagli altri due visti sopra in quanto permette di stabilire con precisione l'opacità da dare all'elemento. Questo serve per avere effetti diversi per diversi elementi.Con tale metodo quindi si può non nascondere o si mostrare un elemento completamente, ma lo si può rendere solo più o meno opaco. La sintassi è la seguente: fadeTo(speed, opacity, [callback]). I parametri sono gli stessi che per gli altri due metodi visti precedentemente, eccetto il secondo parametro che definisce appunto l'opacità : deve essere un numero compreso tra 0 e 1, in cui 0 è l'elemento invisibile e 1 l'elemento completamente visibile (come separatore decimale usare il punto "."). Quindi se avete bene capito, tramite questo metodo è possibile ricondursi ai metodi fadeIn() e fadeOut() settando rispettivamente i valori di opacity a 0 o 1. Ecco un semplice esempio in cui l'elemento è schiarito di un 70% (visibilità intorno al 30%): $("#div_fadeto").click(function () { $("#div_fadeto").fadeIn(2000,0.30); //2 secondi}); Clicca qui !!!!!!
Con questo ultimo esempio abbiamo concluso gli effetti fading ma invitiamo all'utente a provarli in combinazione con gli altri visti. Anche per questo tipo di effetti l'importante è impostare la giusta velocità e il giusto grado di visibilità dell'oggetto. Rimandiamo comunque a leggere gli altri articoli sugli effetti grafici che è possibile creare con jQuery, per poter così combinarli tra loro. Per ulteriori informazioni non esitate a contattarci |