Guida jQuery: chiudere un elemento div aperto dopo un certo tempo

Nella guida jQuery di oggi vediamo questo semplice codice per chiudere un elemento (div o altro) aperto dopo un certo periodo di tempo prefissato. Un’ottima soluzione, ad esempio per chiudere spazi o messaggi pubblicitari dopo un certo timing.

VISITA LA DEMO 

Lo scheletro HTML

Lo scheletro html si compone di due elementi essenziali: il trigger e il box nascosto con il contenuto che desideriamo che si auto-chiuda. Ecco come procedere:

    <div class="trigger"><span>Apri l'elemento</span></div>
    <div class="subcont">

    		<h1>Titolo Esempio</h1>
            	<p>Aspetta qualche secondo l'auto chiusura di questo elemento.</p>

    </div><!--subcont-->

Lo stile in questo esempio è solo per rendere più gradevole l’estetica (ad esempio quando vado sopra a trigger faccio diventare il mouse come puntatore link):

.subcont{ background:#f2f2f2; border:1px solid #d2d2d2; padding:10px;}
.trigger{ padding:10px 0px; width:100%; background:#d2d2d2; cursor:pointer; text-transform:uppercase;}

Animiamo con jQuery

Lo script usa la funzione setInterval che vi permette di eseguire un blocco di istruzioni al suo interno con un determinato timing in maniera ciclica. Ho abbinato poi a questa funzione la proprietà is() di jQuery per verificare lo stato (visibile, o nascosto) del box da gestire. Ecco il codice completo:

$(document).ready(function() {

        //chiudo il box 
	$(".subcont").hide();

         //al click sul trigger
	 $(".trigger").click(
		function(){

                        //faccio apparire il box precedentemente nascosto
			$(".subcont").slideToggle();

                        //setinterval crea un timer che esegue le operazioni in esso contenute
			setInterval(function() {

                                //quando eseguo setinterval (ogni 5000ms) se il box è visibile
				if ($(".subcont").is(":visible")) {

                                //lo chiudo
				$('.subcont').slideToggle();

                                //altrimenti non fare nulla
				} else {}

                        //5000 è il nostro timer, modifica il valore per timer più lenti o veloci.
			},5000);

	});//trigger logo

});//FINE DOM

Vi invito a visionare passo, passo il codice commentato per capire davvero al meglio il funzionamento dello script. Ovviamente ricordatevi di includere nella pagina anche le librerie jQuery.

Conclusioni

Ecco i link dove visionare e scaricare lo script by Targetweb:

DEMO | [viral-download file1=”http://www.targetweb.it/download/2012/chiusura-div-automatica-con-timer-targetweb.zip” name1=”Scarica il file” url=”http://www.targetweb.it/guida-jquery-chiudere-un-elemento-div-aperto-dopo-un-certo-tempo/” message=”Per scaricare il file completo devi condividere l’articolo su un social network.” tweet=”Guida jQuery: chiudere un elemento div aperto dopo un certo tempo” thankyou=”Grazie per aver condiviso, ecco il tuo file:”/]

LICENZA: Lo script è usabile e modificabile in tutte le sue parti! Se lo hai migliorato fammelo sapere nei commenti o nei social network, potresti essere protagonista su targetweb.it!

Come già accennato in apertura questa soluzione è molto basilare, non richiede troppe conoscenze ma… funziona alla grande! Potete usarla per chiudere praticamente di tutto (div, immagini, pubblicità e altro). Fammi sapere cosa ne pensi!