Timeout jQuery effects

Question

I am trying to have an element fade in, then in 5000 ms fade back out again. I know I can do something like:

setTimeout(function(){ $(".notice").fadeOut() }, 5000);

But that will only control the fade out, would I add the above on the callback?

Answer 1

I just figured it out below:

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

I will keep the post for other users!

Answer 2

You can do something like this:

$('.notice')
    .fadeIn()
    .animate({opacity: '+=0'}, 2000)   // Does nothing for 2000ms
    .fadeOut('fast');

Sadly, you can't just do .animate({}, 2000) -- I think this is a bug, and will report it.

Answer 3

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

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

---

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

Answer 4

To be able to use it like that, you need to return this. Without the return, fadeOut('slow'), will not get an object to perform that operation on.

I.e.:

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

Then do this:

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

Answer 5

I have tried to do this so I can get a repetive flash but I cannot get the initial call do work.

I have included the new function

(function($){ 

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

  };
})(jQuery);

` into the end of my jquery.js file (Ver. 1.3.2). However it doesn't work. I am trying to get this to flash the text. It comes back in "Web Developer" toolbar as it cannot find the function idle.

Answer 6

Ben Alman wrote a sweet plugin for jquery called doTimeout it has a lot of nice features!

Check it out here: http://benalman.com/projects/jquery-dotimeout-plugin/

Answer 7

Useful info although does anyone have any suggestions how to have similar functionality using version 1.3.2 of JQuery?

Many thanks,