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?
While @John Sheehan's approach works, you run into the jQuery fadeIn/fadeOut ClearType glitch in IE7. Personally, I'd opt for @John Millikin's setTimeout() approach, but if you're set on a pure jQuery approach, better to trigger an animation on a non-opacity property, such as a margin.
var left = parseInt($('#element').css('marginLeft'));
$('#element')
.animate({ marginLeft: left ? left : 0 }, 5000)
.fadeOut('fast');
You can be a bit cleaner if you know your margin to be a fixed value:
$('#element')
.animate({ marginLeft: 0 }, 5000)
.fadeOut('fast');
EDIT: It looks like the jQuery FxQueues plug-in does just what you need:
$('#element').fadeOut({
speed: 'fast',
preDelay: 5000
});