Nascondi div dopo alcuni secondi

Question

Mi chiedevo, come faccio a nascondere un div in jquery dopo pochi secondi? Come i messaggi di Gmail, ad esempio.

Ho fatto del mio meglio ma non riesco a farlo funzionare.

Answer 1

Questo nasconderà il div dopo 1 secondo (1000 millisecondi).

setTimeout(function() {
    $('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds

#mydiv{
    width: 100px;
    height: 100px;
    background: #000;
    color: #fff;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">myDiv</div>

Se vuoi solo nasconderti senza sbiadire, usa hide () .

Answer 2

Puoi provare .delay()

$(".formSentMsg").delay(3200).fadeOut(300);

chiama il div imposta il ritardo in millisecondi e imposta la proprietà che vuoi cambiare, in questo caso ho usato .fadeOut () in modo che potesse essere animato, ma puoi anche usare .hide ().

http://api.jquery.com/delay/

Answer 3

Esiste un modo davvero semplice per farlo.

Il problema è che .delay ha effetto solo sulle animazioni, quindi quello che devi fare è far sì che .hide () si comporti come un'animazione dandogli una durata.

$ (" # qualunque "). Ritardo () nascondere (1);.

Dandogli una bella durata, sembra essere istantaneo proprio come la normale funzione .hide.

Answer 4

jquery offre una varietà di metodi per nascondere il div in modo temporizzato che non richiede l'impostazione e la successiva cancellazione o reimpostazione dei timer degli intervalli o di altri gestori di eventi. Ecco alcuni esempi.

Pura pelle, un secondo di ritardo

// hide in one second
$('#mydiv').delay(1000).hide(0); 

Pura pelle, nessun ritardo

// hide immediately
$('#mydiv').delay(0).hide(0); 

Nascondi animato

// start hide in one second, take 1/2 second for animated hide effect
$('#mydiv').delay(1000).hide(500); 

dissolvenza

// start fade out in one second, take 300ms to fade
$('#mydiv').delay(1000).fadeOut(300); 

Inoltre, i metodi possono assumere un nome o una funzione di coda come secondo parametro (a seconda del metodo). La documentazione per tutte le chiamate sopra e altre chiamate correlate è disponibile qui: https://api.jquery.com/category/effects/

Answer 5

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

Da http://james.padolsey.com/javascript/jquery-delay- plugin /

(Consente il concatenamento di metodi)

Answer 6

L'uso del timer jQuery ti consentirà anche di avere un nome associato ai timer collegati all'oggetto. Quindi potresti collegare più timer a un oggetto e fermarne uno qualsiasi.

$("#myid").oneTime(1000, "mytimer1" function() {
  $("#something").hide();
}).oneTime(2000, "mytimer2" function() {
  $("#somethingelse").show();  
});

$("#myid").stopTime("mytimer2");

La funzione eval (e i suoi parenti, Function, setTimeout e setInterval) forniscono l'accesso al compilatore JavaScript. Questo a volte è necessario, ma nella maggior parte dei casi indica la presenza di una codifica estremamente scadente. La funzione eval è la funzionalità più abusata di JavaScript.

http://www.jslint.com/lint.html

Answer 7

Probabilmente il modo più semplice è usare il plugin timer. http://plugins.jquery.com/project/timers e poi chiama qualcosa come

$(this).oneTime(1000, function() {
    $("#something").hide();
  });

Answer 8

possiamo usare direttamente

$('#selector').delay(5000).fadeOut('slow');