CODEWITHSUNDEEP
javascriptjquerytiming
James
James

Reputation: 6008

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.

Upvotes: 148

Views: 335276

Answers (9)

Ch UmarJamil
Ch UmarJamil

Reputation: 307

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

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

Upvotes: 2

Robert Mauro
Robert Mauro

Reputation: 598

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/

Upvotes: 19

subindas pm
subindas pm

Reputation: 2774

we can directly use

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

Upvotes: 0

swilliams
swilliams

Reputation: 48910

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

Upvotes: 290

Oisin Lavery
Oisin Lavery

Reputation: 3444

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.

Upvotes: 12

peter punk
peter punk

Reputation: 951

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/

Upvotes: 95

kevin pepperman
kevin pepperman

Reputation:

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

Upvotes: 3

Peter Smit
Peter Smit

Reputation: 28716

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

Upvotes: 6

stimms
stimms

Reputation: 44064

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

Upvotes: 2

Related Questions