delay JQuery effects

The best way is by using the jQuery delay method:

$('#my_id').delay(2000).fadeOut(2000);

Previously you would do something like this

$('#foo').animate({opacity: 1},1000).fadeOut('slow');

The first animate isn't doing anything since you already have opacity 1 on the element, but it would pause for the amount of time.

In jQuery 1.4, they have built this into the framework so you don't have to use the hack like above.

$('#foo').delay(1000).fadeOut('slow');

The functionality is the same as the original jQuery.delay() plugin http://www.evanbot.com/article/jquery-delay-plugin/4

setTimeout(function() { $('#foo').fadeOut(); }, 5000);

The 5000 is five seconds in milliseconds.

I use this pause plugin I just wrote

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

Call it like this :

$("#mainImage").pause(5000).fadeOut();

Note: you don't need a callback.

Edit: You should now use the jQuery 1.4. built in delay() method. I haven't checked but I assume its more 'clever' than my plugin.

Related