Here’s a very tiny jQuery plugin which makes it possible to delay a jQuery animation (or any function) for any amount of time. When you call one animation after another jQuery automatically queues them up and then executes them in order. This plugin inserts a pseudo-animation into that queue resulting in what seems like a delay.

This post has been updated since it’s original publication.

The Code:

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

Usage:

$('div')
    .delay(1000)
    .animate({height:200})
    .delay(1000)
    .animate({height:400})
    .delay(500)
    .fadeOut()
    .delay(500)
    .fadeIn();

If you want to delay something which is not an animation then you have to pass it in it’s own function as the second parameter to ‘delay’. You can use the ‘this’ keyword to reference the current subject of the chain within this callback function:

Read more »