| Effetti Sliding |
 |
 |
|
In questa guida tratteremo tutti quei metodi di jQuery che permettono all'utente di creare effetti di tipo slide. Questi effetti si contraddistinguono dal fatto che creano effetti di tipo "cascata", ovvero una sorta di movimento che permette di far comparire l'oggetto non tutto insieme ma, come se venisse giù da una cascata: la dimensione manipolata da tale effetto è l'altezza dell'elemento, a differenza degli effetti fading in cui invece è modificata l'opacità . Per meglio capire quello che si vuole creare, una serie di esempi ci saranno di notevole aiuto. Vediamo di trattare i metodi che permettono di creare tale effetto e le loro differenze. slideDown ()Con tale metodo è possibile mostrare gli elementi pertinenti alla selezione effettuata, tramite un effetto a comparsa verso il basso.La sintassi corretta è la seguente: slideDown(speed, [callback]). L'altezza è manipolata coerentemente con la velocità impostata. Il parametro callback invece è una funzione che verrà eseguita al completamento dell'effetto. Vediamo ora un semplice esempio di come si possa utilizzare questo metodo: $("#div_mostra").click(function(){$("#div_slidedown").slideDown("slow"); //mostra il div con un effetto slidedown}); Clicca qui !!!!
slideUp ()Questo metodo è speculare al slideDown(), solo che invece di mostrare gli elementi, li nasconde con un effetto a scomparsa verso l'alto.Anche la sintassi è uguale al metodo precedente: slideUp(speed, [callback]). Proponiamo anche qui un semplice esempio per far capire che l'effetto creato: $("#div_nascondi").click(function(){$("#div_slideup").slideUp("slow"); //nasconde il div con un effetto slideup}); Clicca qui !!!! Slide Up!!!
slideToggle ()Questo metodo unisce gli altri due e permette di cambiare la visibilità degli elementi. L'effetto è ottenuto utilizzando alternativamente l'effetto slideDown() per mostrare e slideUp() per nascondere gli elementi.Ecco un esempio di questo effetto: $("#div_scambia").click(function(){$("#div_toggle").slideUp("slow"); //mostra/nasconde il div con un effetto slidetoggle}); Clicca qui !!!! Slide Up!!!
Con quest'ultimo metodo si è chiusa la parte relativa agli effetti di sliding. Come si è visto questi sono molto semplici ma l'impatto visivo è molto gradevole e con la giusta impostazione di velocità si possono creare transizioni veramente particolari e di effetto. Il tutto sta nell'impostare la giusta velocità ed eventualmente scegliere il giusto ordine di combinazione degli effetti, per avere un'unica struttura grafica. 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 |