Blindsignals

Happy Note: I was contacted by the jQuery team and my code is being added to the core functionality; that really made my day!  You will want to remove the current code from your site if you plan on upgrading to the latest release of jQuery - can see the official landing here.

Today in my attempt at sexifying a project with a simple fade out saved message I wanted a cleaner way to delay my fade.

When the user clicks the save button an ajax call is made and the data is saved, the returning JSON data includes a savedOn property which I then place in my blank div. After 20 seconds the "Saved On [date]" gently fades away and all is good.

My current method for calling this timed-fading functionality was something along the lines of this :

setTimeout( "$('+ selector +').fadeOut('slow', function(){ $(this).html('').fadeIn(); });", 20000 );

This basically took my div and faded it out, once faded the div was made blank again, and finally faded the blank div back in so the next time the user clicked save the text would actually appear.

So while that worked great I needed to reuse the code in various other places multiple times, and after some browsing on jQuery's site I found the queue and dequeue references. *Choir singing while hands are raised to the sky*

It appears that all fx ( and well basically everything else ) functionality like .show, .addClass, .fadeIn, all are put in a queue and ran through from start to finish; using the .queue function we can modify the way we run through the list, and well I'm sure you see where I am going with this.

As soon as I read that I could add my own function to the queue of my choice the first thing that jumped into my head is a simple timer that calls the dequeue method after a time I specified. Damn, could it be that simple?

.queue accepts two arguments: name, and of course the callback. The name arguments is the queue you wish to play with, in my case it will probably be the "fx" queue 100% of the time. The callback of course is our ticket to winnersville ( not to be confused with wienersville ).

As an example, the following code will .fadeOut the div five seconds after the function is called.

$(selector).delay(5000).fadeOut('slow');

And to show how the chaining works try this one out. It should fade the element after five seconds, and five seconds later fade it back in.

$(selector).delay(5000).fadeOut('slow').delay(5000).fadeIn('slow');

The great thing about it is the placement of the function operates just like any other fx function; it is executed linearly and there is no "chaining" using callsbacks or hacky animation scripts to try and work around a timer like so many other delay functions do.

Download jQuery Delay 1.0.0
Download jQuery Delay 1.0.0 minified

Enjoy :]