Question

I want to create a number of hidden objects via jQuery,
that (once all created) slideDown() sequentially, one by one.
I don’t want the second object to wait for the first to complete
the entire slideDown(), but it needs a certain delay.

The (not working) code i have is the following:

$(document).ready(function() {

        var i = 3;

    var AnimFunc = function() {

        $('#container').append('<div id="elem_' + i + '>' + i + '</div>').hide().slideDown();
        --i;
        i == 0 ? clearInterval(startAnim) : null; // clear interval to prevent infinite loop

    }

    startAnim = setInterval(AnimFunc, 500); // 500 delay between slideDowns.

});

I guess it should even be possible with a do/while without the setInterval and clearInterval.

I hope my question is clear and someone will be able to help me.

Thanks,
Knal

Answer 1

Not sure I get what your trying to do, but maybe it’s something like this:

var objectNumb = 10,
    speed = 1500;

$(document).ready(function() {
    for (var i=objectNumb; i>=1; i--) {
        $('#container').append('<div id="elem_'+i+'">'+i+'</div>').hide().delay(speed).slideDown(speed);
    }
});

FIDDLE