[jquery] Timeout jQuery effects

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?

I just figured it out below:

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

I will keep the post for other users!

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.

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

Ben Alman wrote a sweet plugin for jQuery called doTimeout. It has a lot of nice features!

Check it out here: jQuery doTimeout: Like setTimeout, but better.

I just figured it out below:

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

I will keep the post for other users!

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

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.

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.

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

This can be done with only a few lines of jQuery:

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});?

see the fiddle below for a working example...

http://jsfiddle.net/eNxuJ/78/

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.

I just figured it out below:

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

I will keep the post for other users!

This can be done with only a few lines of jQuery:

$(function(){
    // make sure img is hidden - fade in
    $('img').hide().fadeIn(2000);

    // after 5 second timeout - fade out
    setTimeout(function(){$('img').fadeOut(2000);}, 5000);
});?

see the fiddle below for a working example...

http://jsfiddle.net/eNxuJ/78/

Ben Alman wrote a sweet plugin for jQuery called doTimeout. It has a lot of nice features!

Check it out here: jQuery doTimeout: Like setTimeout, but better.

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