Ocultar div después de unos segundos

Me preguntaba, ¿cómo puedo ocultar un div después de unos segundos? Al igual que los mensajes de Gmail, por ejemplo.

Lo he intentado lo mejor posible pero no puedo hacerlo funcionar.

Esto ocultará el div después de 1 segundo (1000 milisegundos).

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>

Si solo quieres esconderte sin desvanecerse, úsalo hide().

Puedes probar el .delay()

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

llame al div para establecer el tiempo de retraso en milisegundos y configure la propiedad que desea cambiar, en este caso usé .fadeOut () para que pueda ser animado, pero también puede usar .hide ().

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

jquery ofrece una variedad de métodos para ocultar el div de una manera cronometrada que no requiere configurar y luego borrar o restablecer temporizadores de intervalo u otros controladores de eventos. Aquí están algunos ejemplos.

Piel pura, un segundo de retraso

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

Piel pura, sin demora

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

Piel animada

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

desaparecer

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

Además, los métodos pueden tomar un nombre de cola o funcionar como un segundo parámetro (dependiendo del método). La documentación para todas las llamadas anteriores y otras llamadas relacionadas se puede encontrar aquí: https://api.jquery.com/category/effects/

Hay una forma realmente simple de hacer esto.

El problema es que .delay solo efectúa animaciones, por lo que lo que debe hacer es hacer que .hide () actúe como una animación dándole una duración.

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

Al darle una duración corta y agradable, parece ser instantáneo al igual que la función regular .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);
}

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

(Permite el encadenamiento de métodos)

El uso del temporizador jQuery también le permitirá tener un nombre asociado con los temporizadores que se adjuntan al objeto. Por lo tanto, puede adjuntar varios temporizadores a un objeto y detener cualquiera de ellos.

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

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

La función eval (y sus familiares, Function, setTimeout y setInterval) proporcionan acceso al compilador de JavaScript. Esto a veces es necesario, pero en la mayoría de los casos indica la presencia de una codificación extremadamente mala. La función eval es la característica más mal utilizada de JavaScript.

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

Probablemente la forma más fácil es usar el plugin de temporizadores. http://plugins.jquery.com/project/timers y luego llame a algo como

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

podemos usar directamente

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

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

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