Timeout jQuery effects Timeout jQuery effects jquery jquery

Timeout jQuery effects


Update: As of jQuery 1.4 you can use the .delay( n ) method. http://api.jquery.com/delay/

$('.notice').fadeIn().delay(2000).fadeOut('slow'); 

Note: $.show() and $.hide() by default are not queued, so if you want to use $.delay() with them, you need to configure them that way:

$('.notice')    .show({duration: 0, queue: true})    .delay(2000)    .hide({duration: 0, queue: true});

You could possibly use the Queue syntax, this might work:

jQuery(function($){ var e = $('.notice'); e.fadeIn(); e.queue(function(){   setTimeout(function(){     e.dequeue();   }, 2000 ); }); e.fadeOut('fast'); }); 

or you could be really ingenious and make a jQuery function to do it.

(function($){   jQuery.fn.idle = function(time)  {       var o = $(this);       o.queue(function()      {          setTimeout(function()         {             o.dequeue();          }, time);      });  };})(jQuery);

which would ( in theory , working on memory here ) permit you do to this:

$('.notice').fadeIn().idle(2000).fadeOut('slow'); 


I just figured it out below:

$(".notice")   .fadeIn( function()    {      setTimeout( function()      {         $(".notice").fadeOut("fast");      }, 2000);   });

I will keep the post for other users!


Great hack by @strager. Implement it into jQuery like this:

jQuery.fn.wait = function (MiliSeconds) {    $(this).animate({ opacity: '+=0' }, MiliSeconds);    return this;}

And then use it as:

$('.notice').fadeIn().wait(2000).fadeOut('slow');