Thus I wrote this jQuery plugin that does infact this (demo):
/*
* ShowSlow v1.1 - jQuery plugin
*
* Copyright (c) 2009-2010 Andreas Grech
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* http://blog.dreasgrech.com
*/
(function($) {
$.fn.showSlow = function(options) {
var opts = $.extend({}, $.fn.showSlow.defaults, options),
elementCounter = 0,
$elements = this,
isStopped = 0,
isPaused = 0,
callbackExecuted = 0,
executeCallback = function(val) {
if (typeof opts.callback == "function") {
callbackExecuted = 1;
opts.callback(getValues());
}
},
getValues = function() {
return {
elementsDone: elementCounter
};
},
showNextDiv = function($element) {
if (isPaused || isStopped) {
return;
}
if (!$element.length) {
executeCallback();
return;
}
$element.slideDown(opts.slideTime, function() {
setTimeout(function() {
showNextDiv($elements.eq(elementCounter++));
},
opts.displayTime);
});
};
return {
start: function() {
if (isStopped || elementCounter < $elements.length) {
$elements.css("display", "none");
elementCounter = 0;
} else if (isPaused) {
elementCounter -= 1;
}
isStopped = 0;
isPaused = 0;
callbackExecuted = 0;
showNextDiv($elements.eq(elementCounter++));
},
stop: function() {
isStopped = 1;
if (!callbackExecuted) {
executeCallback();
}
return elementCounter; //return the number of elements displayed before stopped
},
pause: function() {
isPaused = 1;
}
};
};
$.fn.showSlow.defaults = {
slideTime: 1000,
displayTime: 500
};
})(jQuery);