48

I want to fade out an element and all its child elements after a delay of a few seconds. but I haven't found a way to specify that an effect should start after a specified time delay.

2
  • 1
    Can you give an example of when the children of an element aren't faded with the element?
    – tvanfosson
    Oct 30, 2008 at 18:31
  • 1
    Sorry, my mistake, I'll update the post
    – Dónal
    Oct 30, 2008 at 18:38

6 Answers 6

77
setTimeout(function() { $('#foo').fadeOut(); }, 5000);

The 5000 is five seconds in milliseconds.

2
  • 3
    Note that this is using Javascript's built-in setTimeout function, nothing jQuery specific. Oct 30, 2008 at 18:24
  • This only partially answers his question, I think. Oct 30, 2008 at 18:26
43

I use this pause plugin I just wrote

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

Call it like this :

$("#mainImage").pause(5000).fadeOut();

Note: you don't need a callback.


Edit: You should now use the jQuery 1.4. built in delay() method. I haven't checked but I assume its more 'clever' than my plugin.

4
  • just watch out if jQuery ever adds a pause() function because there's will probably be better than mine! but its good to abstract away what youre doing like this Jun 5, 2009 at 3:10
  • can someone explain WHY i dont need a callback? i'm not quite sure why this doesnt return immediately Sep 11, 2009 at 23:52
  • jQuery has a built in animation queue... if you never reset/stop the queue, the "pause" acts as period of animation that doesn't actually animate anything.
    – gnarf
    Jan 10, 2010 at 0:27
  • 3
    stop() doesn't work with delay(), so I still use your dummy animation hack. (bug bugs.jquery.com/ticket/6576 )
    – yonran
    Jan 22, 2011 at 20:26
19

Previously you would do something like this

$('#foo').animate({opacity: 1},1000).fadeOut('slow');

The first animate isn't doing anything since you already have opacity 1 on the element, but it would pause for the amount of time.

In jQuery 1.4, they have built this into the framework so you don't have to use the hack like above.

$('#foo').delay(1000).fadeOut('slow');

The functionality is the same as the original jQuery.delay() plugin http://www.evanbot.com/article/jquery-delay-plugin/4

11

The best way is by using the jQuery delay method:

$('#my_id').delay(2000).fadeOut(2000);

0
1

You can avoid using setTimeout by using the fadeTo() method, and setting a 5 second delay on that.

$("#hideAfterFiveSeconds").click(function(){
  $(this).fadeTo(5000,1,function(){
    $(this).fadeOut("slow");
  });
});
1
  • doing this kind of block is very cpu intensive compared to setTimeout. I don't see the advantage. - Why is avoiding the native timer necessary?
    – redsquare
    Jan 18, 2009 at 1:23
1

I've written a plugin to let you add a delay into the chain.

for example $('#div').fadeOut().delay(5000).fadeIn(); // fade element out, wait 5 seconds, fade element back in.

It doesn't use any animation hacks or excessive callback chaining, just simple clean short code.

http://blindsignals.com/index.php/2009/07/jquery-delay/

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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