Ocultar div después de unos segundos

Question

Me estaba preguntando, ¿cómo en jquery puedo ocultar un div después de unos segundos? Como los mensajes de Gmail, por ejemplo.

Lo he intentado lo mejor posible, pero no puedo hacer que funcione.

Answer 1

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 desea ocultar sin desaparecer, utilice hide () .

Answer 2

Puedes probar el .delay()

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

llame al div. establezca el tiempo de demora en milisegundos y establezca 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/

Answer 3

Hay una manera muy simple de hacer esto.

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

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

Al darle una buena duración corta, parece ser instantánea al igual que la función .hide normal.

Answer 4

jquery ofrece una variedad de métodos para ocultar el div de manera cronometrada que no requiere configurar y luego borrar o reiniciar 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); 

Pellejo animado

// 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 función como segundo parámetro (según el método). La documentación para todas las llamadas anteriores y otras llamadas relacionadas se pueden encontrar aquí: 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);
}

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

(Permite el encadenamiento de métodos)

Answer 6

El uso del temporizador jQuery también le permitirá tener un nombre asociado con los temporizadores que se adjuntan al objeto. Así que puedes 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 parientes, Function, setTimeout y setInterval) proporcionan acceso al compilador de JavaScript. Esto es a veces 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

Answer 7

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

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

Answer 8

podemos usar directamente

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