SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="wrapper">
    <div id="box1">Box1</div>
    <div id="box2">Box2</div>
    <div id="box3">Box3</div>
</div>
<button type="button" id="fadeIn">Fade In</button>
<button type="button" id="fadeInFadeOut">Fade In+Fade Out</button>

CSS

#fadeIn{position: absolute;top: 10px;left: 10px;}
#fadeInFadeOut{position: absolute;top: 10px;left: 100px;}

#wrapper{margin-top: 50px; width: 330px;
         height: 150px; border: 1px solid #000000;}

#wrapper > *{margin-right: 10px; width: 100px; height: 100px;
            float: left; display: none;}

#box1{background-color: #CCCCCC; left: 0px;}
#box2{background-color: #FF0000; left: 110px;}
#box3{background-color: #0000FF; left: 220px;}

JavaScript

(function($) {
$.fn.fadeInSequence = function(fadeInTime, timeBetween) {
    //Default Values
    timeBetween = timeBetween || 0;
    fadeInTime = fadeInTime || 500;

    //The amount of remaining time until the animation is complete.
    //Initially set to the value of the entire animation duration.
    var l = this.length, remainingTime = l * (fadeInTime+timeBetween);

    $.each(this.get().reverse(), function(i) {
        
        //Wait until previous element has finished fading and timeBetween has elapsed
        $(this).delay(i*(fadeInTime+timeBetween));

        //Decrement remainingTime
        remainingTime -= (fadeInTime+timeBetween);

        if($(this).css('display') == 'none')
        {
            $(this).fadeIn(fadeInTime);
        }
        else //If hidden by other means such as opacity: 0
        {
            $(this).animate({'opacity' : 1}, fadeInTime);
        }

        //Delay until the animation is over to fill up the queue.
        $(this).delay(remainingTime+timeBetween);
    });
    return this;
};

})(jQuery);

$("#fadeIn").click(function() {
    $("#wrapper").children().hide().fadeInSequence();
    });

$("#fadeInFadeOut").click(function() {
    $("#wrapper").children().hide().fadeInSequence().fadeOut();
    });