Guida jQuery: uso di delay e slideToggle

Eccoci giunti alla terza parte della guida dedicata al jQuery, quest’oggi analizziamo l’uso del comando delay() per temporizzare le nostre animazioni, e i comandi slideUp e down per far apparire/scomparire qualche elemento.

Ovviamente vi invito a leggere le altre guide se non sapete neppure di cosa stiamo parlando!

Delay() in jquery

Il comando delay()viene utilizzato per temporizzare le animazioni in jQuery. Badate bene non viene usato per stabilire la durata dell’animazione bensì il tempo fra un’animazione e l’altra. Per stabile la durata di un’animazione fate riferimento a questa guida.

L’utilizzo è molto semplice: .fadeIn().delay(500).hide() , in questo caso ho usato delay() per temporizzare di 500 la scomparsa di un certo elemento.

Esempio pratico:

$(document).ready(function() {

			$(".apri").click(
	 		function(){
	 		$("#box").fadeIn("slow");
			});

			$(".chiudi").click(
	 		function(){
	 		$("#box").delay(500).fadeOut("slow"); //ritarda la chiusura
			});

	});//FINE DOM

Come vedete in questo esempio (lo stesso della scorsa volta) abbiamo ritardato di 500 la chiusura del box, quando clicchiamo sul trigger “chiudi”. Ovviamente possiamo fare la stessa cosa a nostro piacimento anche per l’apertura dello stesso e per qualsiasi altra animazione noi volessimo temporizzare.

Guarda la demo qui

Uso di SlideUp e SlideDown

SlideUp e SlideDown sono delle funzioni molto interessanti di jQuery. Ci permettono infatti di creare animazioni davvero suggestive con il minimo sforzo. Queste animazioni sono l’ideale per news, eventi speciali e molto altro, e rendono la nostra interfaccia web più “dinamica”.

MA slideUp e slideDown sono niente se paragonati al più comodo e pratico slideToggle, una sorta di “mix” tra i due slideUp/Down e il toggle. Questa funzione ci permette, con un solo trigger (ecco perchè è più comodo delle sue due controparti) e con meno codice, di fare aprire e chiudere un div con effetto “slide” molto carino. Ovviamente a livelli intermedi possiamo combinare diverse animazioni, per creare interfacce grafiche che non hanno nulla da invidiare a flash. Se siete alle prime armi però iniziare a capire bene le funzioni “singolarmente” per poi dedicarvi meglio a tutto il resto.

Ecco un esempio di slideToggle:

$(document).ready(function() {

			$(".chiudi").click(
	 		function(){
	 		$("#box").slideToggle("fast");	//imposta fast o slow
			});

	});//FINE DOM

Facile, veloce e d’impatto, penso che slideToggle sia quasi l’emblema del jQuery “WRITE LESS DO MORE” per i novizi questa funzione risulta davvero interessante.

Guarda la demo di slideToggle

Mettiamo a posto le idee

Bene tirando le somme di questa guida avete imparato (o almeno spero xD ):

– Le basi del DOM

– Sintassi e uso di jQuery e sue librerie

– A far apparire/scomparire un box tramite fade o toggle

– A temporizzare animazioni

Nella prossima “lezione” vi illustrerò l’uso del “mattone” di jQuery ovvero il metodo animate() e sue sfaccettature.

P.s probabilmente questa sarà l’ultima vera “guida” prima delle vacanze estive, durante il periodo di ferie aggiornerò il blog meno regolarmente, anche se vi invito a seguirmi ugualmente per scoprire alcune curiosità o novità particolari dal web. Ci ritroviamo a settembre con tante novità, guide e molto altro!