using jquery how to use fadein, delay and then fadeout issue

James Radford picture James Radford · Sep 7, 2010 · Viewed 14.2k times · Source

I need to make something fadeIn, then stay there for a second and then fadeOut using JQuery.

I've tried this but it dosent work for some reason???

$('#' + uMessage).fadeIn("fast").fadeOut("slow");  // works
$('#' + uMessage).fadeIn("fast").delay(1000).fadeOut("slow");  // fails

any suggestions where im going wrong?

Many thanks!!!

Answer

sled picture sled · Sep 7, 2010

Your second approach should be fine actually, corresponding to the docs (http://api.jquery.com/delay/)

Another approach may be to use the callback function which is called when the fadeIn has finished:

$('#' + uMessage).fadeIn("fast", function() { $(this).delay(1000).fadeOut("slow"); });

just a guess

Edit:

If you can't use the delay() method, then you could try this one:

$('#' + uMessage).fadeIn("fast", function() { 
  c_obj = $(this);
  window.setTimeout(function() { $(c_obj).fadeOut("slow"); }, 1000); 
});

Here's an example: http://jsfiddle.net/KwWFR/