delay JQuery effects

Question

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.

Answer 1

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

The 5000 is five seconds in milliseconds.

Answer 2

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

These days this works setTimeout( "$('#foo').fadeOut();", 5000);

Also this may seem hackish but try:

$('#foo').fadeIn(5000, function(){ this.fadeOut(xxx)} );

Answer 3

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

Answer 4

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 'cleverer' than my plugin.

Answer 5

check this out:

http://plugins.jquery.com/project/dAnimate

achieve's what you want within the naitive jQuery animation object ( keeps stop() intact and functional)

Answer 6

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/

Answer 7

This is the final, the ultimate answer to effects with delay in jQuery:

$(document).ready(function()
    {
        $('.teaser img').hide();
        var slika = 0;

        function rekurzivni_ispis(trenutna_dubina, max_dubina){
            if(trenutna_dubina <= max_dubina){
                $('#post' + trenutna_dubina + ' img').show(500, function() { rekurzivni_ispis(++trenutna_dubina, max_dubina); } );
            } else {
                return 1;
            }
        };

        rekurzivni_ispis(1, 10);

    }
);

Long live recursion and callback functions!

Answer 8

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

Answer 9

The best way is by using the jQuery delay method:

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