Hide div after a few seconds

Question

I was wondering, how in jquery am I able to hide a div after a few seconds? Like Gmail's messages for example.

I've tried my best but am unable to get it working.

• Joel Coehoorn: Is just hiding good enough, or do you need it to fade?

Answer 1

This will hide the div after 1 second (1000 milliseconds).

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>

If you just want to hide without fading, use hide().

• cregox: and you have beaten crazy Joel Coehoorn very nicely in one shot! :)
• Paul T. Rawkeen: @James, For sure there is no difference in the final result, but I suppose that implementation using .delay() is more "native" and elegant for jQuery.
• Raptor: you can replace .fadeOut('fast') with .hide() for instant hide of the div.

Answer 2

You can try the .delay()

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

call the div set the delay time in milliseconds and set the property you want to change, in this case I used .fadeOut() so it could be animated, but you can use .hide() as well.

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

• Marek Bar: This is better beacause I don't have to use setTimeoutand code is easier to read.

Answer 3

jquery offers a variety of methods to hide the div in a timed manner that do not require setting up and later clearing or resetting interval timers or other event handlers. Here are a few examples.

Pure hide, one second delay

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

Pure hide, no delay

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

Animated hide

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

fade out

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

Additionally, the methods can take a queue name or function as a second parameter (depending on method). Documentation for all the calls above and other related calls can be found here: https://api.jquery.com/category/effects/

Answer 4

There's a really simple way to do this.

The problem is that .delay only effects animations, so what you need to do is make .hide() act like an animation by giving it a duration.

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

By giving it a nice short duration, it appears to be instant just like the regular .hide function.

• Brian Wagner: This helped me. Makes it clear that you must pass some value to hide(), otherwise delay() will not be triggered.

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

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

(Allows chaining of methods)

Answer 6

Using the jQuery timer will also allow you to have a name associated with the timers that are attached to the object. So you could attach several timers to an object and stop any one of them.

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

The eval function (and its relatives, Function, setTimeout, and setInterval) provide access to the JavaScript compiler. This is sometimes necessary, but in most cases it indicates the presence of extremely bad coding. The eval function is the most misused feature of JavaScript.

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

Answer 7

Probably the easiest way is to use the timers plugin. http://plugins.jquery.com/project/timers and then call something like

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

• spender: Is there any compelling reason to use the timers plugin over setTimeout or setInterval?
• Nathan Ridley: I would say that downloading and attaching a jquery plugin is less easy than simply using setTimeout.
• Jason Bunting: I don't think this is necessarily a bad thing, but since it is rare that I ever use timers in my code, having that plugin around (read: extra code, bloat) for those few times does not outweigh the cost. If you were writing a lot of code that needed to use timers, and were using jQuery, I can see why this plugin would be very useful to keep with the jQuery syntax...

Answer 8

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

• Mark Rotteveel: Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Answer 9

we can directly use

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