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

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

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!

    1. Ciao Alex, elimina subcont hide(); (la prima riga dello script), e aggiungi .subcont{display:none;} nel tuo CSS.

      E’ un problema dovuto al document.ready che in pratica fa avviare lo script (e quindi anche il metodo hide()) DOPO che il documento si è caricato ed è pronto. In alternativa usa al posto di ready il metodo document load (Sconsigliato in questo caso, usa i css).

      Fammi sapere se era quello che intendevi,
      Ciao!

      1. Grazie infinite era proprio quello che intendevo, pensavo anch’io di risolverla con i css però usavo visibility:hidden ed era quello il mio errore. Ti ringrazio anche per quello che pubblichi trovo sempre cose interessanti e allo stesso tempo utilissime.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Errori PDO: HY093 analizziamo come risolverlo

Errori PDO: HY093 analizziamo come risolverlo