jQuery: fade out with delay

by Ganesh Salunkhe

HTML

<div id="test"></div>

CSS

#test {
    margin: 2em auto;
    width: 10em;
    height: 10em;
    background: #069;
    border-radius: 50%;
}

JavaScript

(function($) {

    $.fn.fadeDelay = function(delay) {

        var that = $(this);
        delay = delay || 3000;

        return that.each(function() {

            $(that).queue(function() {

                setTimeout(function() {

                    $(that).dequeue();

                }, delay);
            });

            $(that).fadeOut('slow');
        });
    };

})(jQuery);

$('#test').fadeDelay(4000);