New jQuery delay() method

I’m a little late with this post as jQuery 1.4 (and since then 1.4.1) came out on January 14th but I’ll write it anyway. A simple little method that has been added to the core is delay(); it allows you to delay the execution of functions that come later in the queue. There have been times in the past where I’ve wanted a transition to pause for a couple of seconds, then continue; so to do this I was using a snippet of code from Karl Swedberg:

1
2
3

jQuery(function($){
    $("#selectedElement").fadeOut().animate({opacity: 0.0}, 2000).fadeIn();
});

The code above animates at 0 opacity for 2 seconds; since the element already has 0 opacity (from the fadeOut) nothing happens, then it fades back in. The method worked but it was a bit of a hack. So now we can use the delay method:

1
2
3

jQuery(function($){
    $("#selectedElement").fadeOut().delay(2000).fadeIn();
});

Simple! The method can take a value (in milliseconds) for the delay or it can take the usual ‘slow’ and ‘fast’ strings for 200 and 600 milliseconds respectively. The delay method is just the tip of the iceberg with jQuery 1.4, it’s well worth an upgrade.