Ocultar div después de unos segundos


123

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.


1
¿Es que esconderse es lo suficientemente bueno o necesitas que se desvanezca?
Joel Coehoorn

Respuestas:


247

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


2
¡y has derrotado al loco Joel Coehoorn de una sola vez! :)
cregox

3
@ James, seguro que no hay diferencia en el resultado final, pero supongo que el uso de la implementación .delay()es más "nativo" y elegante jQuery.
Paul T. Rawkeen

puede reemplazar .fadeOut('fast')con .hide()para ocultar al instante del div.
Raptor

90

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/


77
Esto es mejor porque no tengo que usar setTimeoutand y el código es más fácil de leer.
Marek Bar

12

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/


10

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.



3

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


2

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();
  });

1
¿Hay alguna razón convincente para usar el complemento de temporizadores sobre setTimeout o setInterval?
gastador

2
Diría que descargar y adjuntar un complemento jquery es menos fácil que simplemente usar setTimeout.
Nathan Ridley

1
No creo que esto sea necesariamente algo malo, pero dado que es raro que alguna vez use temporizadores en mi código, tener ese complemento alrededor (leer: código adicional, hinchazón) por esas pocas veces no supera el costo. Si estaba escribiendo una gran cantidad de código que necesitaba usar temporizadores, y estaba usando jQuery, puedo ver por qué este complemento sería muy útil para mantener la sintaxis de jQuery ...
Jason Bunting

0

podemos usar directamente

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

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

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

No publique solo el código como respuesta, sino que también proporcione una explicación de lo que hace su código y cómo resuelve el problema de la pregunta. Las respuestas con una explicación generalmente son más útiles y de mejor calidad, y es más probable que atraigan votos positivos.
Mark Rotteveel
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.