Nascondi div dopo pochi secondi

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

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

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().

Puoi provare il file .delay()

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

chiama il div imposta il tempo di ritardo in millisecondi e imposta la proprietà che vuoi modificare, in questo caso ho usato .fadeOut () così potrebbe essere animato, ma puoi usare anche .hide ().

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

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

Pelle pura, un secondo di ritardo

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

Pelle pura, nessun ritardo

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

Pelle animata

// 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 di coda o funzionare come secondo parametro (a seconda del metodo). La documentazione per tutte le chiamate precedenti e altre chiamate correlate può essere trovata qui: https://api.jquery.com/category/effects/

C'è un modo davvero semplice per farlo.

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

$("#whatever").delay().hide(1);

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

$.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)

L'uso del timer jQuery ti consentirà anche di avere un nome associato ai timer collegati all'oggetto. Quindi puoi collegare diversi 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. A volte è necessario, ma nella maggior parte dei casi indica la presenza di una codifica estremamente negativa. La funzione eval è la caratteristica più utilizzata in modo improprio di JavaScript.

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

Probabilmente il modo più semplice è utilizzare il plug-in dei timer. http://plugins.jquery.com/project/timers e quindi chiama qualcosa di simile

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

possiamo usare direttamente

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

<script>
      $(function() {
      $(".hide-it").hide(7000);
    });              
</script>

<div id="hide-it">myDiv</div>