CODEWITHSUNDEEP
jqueryjquery-animatedelayintervals
knalpiap
knalpiap

Reputation: 67

Create N animated objects

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

Upvotes: 1

Views: 120

Answers (2)

adeneo
adeneo

Reputation: 318302

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

Upvotes: 0

Ali Youhanaei
Ali Youhanaei

Reputation: 384

when you generate the id you lose the double quotation after adding i
use this: ' + i + ' "

Upvotes: 1

Related Questions