Return to Answer

###Update Here's what it looks like as a plugin:

Update

Here's what it looks like as a plugin:

###Update Here's what it looks like as a plugin:

(function($) {
 $.fn.fanDownHiddens = function() {
 return this.each(function() { 
 var $parent = $(this);
 
 $parent.find('div:hidden:last').slideDown(function() {
 $parent.fanDownHiddens(); 
 });
 });
 } 
})(jQuery);

And then the onload with the test data.

(function($) {
 
 $(function() {
 $("#input1").click(function() {
 setupTestMessages('.parent');
 $('.parent').fanDownHiddens();
 });
 });
 
 function setupTestMessages(parent) {
 var $parent = $(parent),
 testData = [1,2,3];
 
 for(var content in testData) {
 var $message = newMessage(testData[content]);
 
 $parent.prepend($message);
 }
 
 function newMessage(text) {
 return $("<div />").text(text).hide();
 };
 }
})(jQuery);

Here's the plugin working: http://jsfiddle.net/natedavisolds/TP66b/12/

I would use function recursion in place of a jQuery queue.

The central piece is the displayNextHiddenMessagesIn function. As the name implies, it grabs the next hidden message and displays it. After the message is displayed, it calls this function again... looping until all messages are visible.

To me, this seems much more readable and easier to maintain. Also, it would be trivial to have a another message parent and reuse this same code (i.e. error messages and information messages).

(function($) {
 function createMessageFor(parent, contents) {
 var $parent = $(parent);
 
 for(var content in contents) {
 var $message = newMessage(contents[content]);
 
 $parent.prepend($message);
 }
 
 function newMessage(text) {
 return $("<div />").text(text).hide();
 };
 }
 
 var displayNextHiddenMessagesIn = function(parent) {
 var $parent = $(parent),
 $nextMessage = $parent.find('div:hidden:last');
 
 if (hasMessage()) displayMessage();
 
 function hasMessage() {
 return $nextMessage.size() > 0; 
 };
 
 function displayMessage(message) {
 $nextMessage.slideDown(function() {
 displayNextHiddenMessagesIn($parent); 
 });
 };
 };
 $("#input1").click(function()
 {
 createMessageFor('.parent', [1,2,3]);
 displayNextHiddenMessagesIn('.parent');
 });
 
})(jQuery);

see it in action: http://jsfiddle.net/natedavisolds/TP66b/6/

I would use function recursion in place of a jQuery queue.

The central piece is the displayNextHiddenMessagesIn function. As the name implies, it grabs the next hidden message and displays it. After the message is displayed, it calls this function again... looping until all messages are visible.

To me, this seems much more readable and easier to maintain. Also, it would be trivial to have a another message parent and reuse this same code (i.e. error messages and information messages).

(function($) {
 function createMessageFor(parent, contents) {
 var $parent = $(parent);
 
 for(var content in contents) {
 var $message = newMessage(contents[content]);
 
 $parent.prepend($message);
 }
 
 function newMessage(text) {
 return $("<div />").text(text).hide();
 };
 }
 
 var displayNextHiddenMessagesIn = function(parent) {
 var $parent = $(parent);
 $parent.find('div:hidden:last').slideDown(function() {
 displayNextHiddenMessagesIn($parent); 
 });
 };
 $("#input1").click(function()
 {
 createMessageFor('.parent', [1,2,3]);
 displayNextHiddenMessagesIn('.parent');
 });
 
})(jQuery);

see it in action: http://jsfiddle.net/natedavisolds/TP66b/6/