sign up

log in

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.

Hide div after a few seconds

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.
javascript

jquery

timing

edited Jul 13 at 10:36

majidgeek
2,896 4 17 38

asked May 4 '09 at 17:02

James
1,254 8 29 58

Is just hiding good enough, or do you need it to fade? Joel Coehoorn May 4 '09 at 17:03

add a comment

6 Answers
This will hide the div after 1 second (1000 milliseconds).
setTimeout(function() {
$('#mydiv').fadeOut('fast');
}, 1000); // <-- time in milliseconds
If you just want to hide without fading, use hide() .
answered May 4 '09 at 17:03
swilliams
20.3k 13 64 114

Thank you very much.

and you have beaten crazy Joel Coehoorn very nicely in one shot! :) Cawas Mar 18 '11 at 19:14

@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 . Paul T. Rawkeen Aug 14 '12 at 9:50

James May 4 '09 at 17:13

you can replace .fadeOut('fast') with .hide() for instant hide of the div. Raptor Jan 10 '13 at 2:29
add a comment

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/
edited Jun 13 '12 at 9:28
Marijn
6,408 4 24 52

answered Sep 23 '11 at 16:56

peter punk
451 4 2

This is better beacause I don't have to use setTimeoutand code is easier to read. Marek Bar Oct 7 '12 at
15:58

tour

help

stack overflow careers

Take the 2-minute tour

add a comment

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.
answered Jun 21 '12 at 13:08
Oisin Lavery
1,708 2 10 13
Clever! Worked well for me. simmerdesigns Dec 28 '13 at 20:25
add a comment

$.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)
answered May 4 '09 at 17:06
Peter Smit
5,970 8 47 108
add a comment

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();
});
answered May 4 '09 at 17:05
stimms
15.5k 15 58 105
Is there any compelling reason to use the timers plugin over setTimeout or setInterval? spender May 4 '09 at
17:06
I would say that downloading and attaching a jquery plugin is less easy than simply using setTimeout.
Nathan Ridley May 4 '09 at 17:06
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... Jason Bunting May 4 '09 at 17:39
add a comment

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
edited Oct 10 '11 at 8:49
kamaci
11.4k 21 99 213

answered May 4 '09 at 22:20

kevin pepperman

add a comment

Not the answer you're looking for? Browse other questions tagged javascript jquery
timing or ask your own question.