Hide div after a few seconds

Question

Hello guys,

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.

Thanks!

Answer 1

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

Answer 2

You may want to call

$("div").hide();

in a function which is called in an setTimeout() method.

Answer 3

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

Answer 4

$.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 5

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