How do you pause before fading an element out usin

Question

I would like to flash a success message on my page.

I am using the jQuery fadeOut method to fade and then remove the element. I can increase the duration to make it last longer, however this looks strange.

What I would like to happen is have the element be displayed for five seconds, then fade quickly, and finally be removed.

How can you animate this using jQuery?

Answer 1

use setTimeout(function(){$elem.hide();}, 5000);

Where $elem is the element you wish to hide, and 5000 is the delay in milliseconds. You can actually use any function within the call to setTimeout(), that code just defines a small anonymous function for simplicity.

Answer 2

For a pure jQuery approach, you can do

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

It's a hack, but it does the job