How do you pause before fading an element out using jQuery?

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 duratio

Answer 1

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