JQuery Effect Delay

Question

I want to wash the element and all its children after a delay of a few seconds. but I did not find a way to indicate that the effect should begin after a certain delay.

Answer 1

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

5000 seconds is five seconds in milliseconds.

Answer 2

I use this pause plugin, I just wrote

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

Name it as follows:

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

Note: you do not need a callback.

---

Edit: You should now use jQuery 1.4. built-in delay () method . I have not tested, but I assume that it is more “smarter” than my plugin.

Answer 3

You used to do something like this

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

The first animat does nothing, since you already have an opacity of 1 on the element, but it pauses for a while.

In jQuery 1.4, they embedded this into the structure, so you do not need to use a hack as shown 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 4

The best way is to use jQuery's delay method:

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

Answer 5

You can avoid using setTimeout with the fadeTo () method and set a 5 second delay for it.

 $("#hideAfterFiveSeconds").click(function(){ $(this).fadeTo(5000,1,function(){ $(this).fadeOut("slow"); }); }); 

Answer 6

I wrote a plugin to add delay to the chain.

e.g. $ ('# div'). fadeOut (). delay (5000) .fadeIn (); // force out the element, wait 5 seconds, extinguish the element again.

It does not use animated hacks or an excessive callback chain, just pure clean short code.

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