Question

I have created a jQuery animation that can be seen by clicking the Preview button on top:

$(function(){
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() {
        var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide();
        $("body").queue(function(next) {
            elem.slideDown('slow', next);
        });
    });
});

http://jsbin.com/anayi3/edit

I have used the slideDown animation method. The problem is that all items slide down together. I want each number to display after short delay.

Answer 1

An example using recursive anonymous function. Put this inside your document-ready function.

  // Array of elements to be animated.
  var elements = $('.your-selector-here li').get();

  (function () {
    // Take out the first element of array, animate it
    // and pass this anonymous function as callback.
    $(elements.shift()).slideDown('slow', arguments.callee);
  })();
​