Question

I have a jQuery function that does a .clone() on an object, and then an .insertAfter() and a .slideDown() on the cloned object. This whole function is wrapped inside a while loop. I will keep this as short and concise as possible and show a generic example:

while (statement) {
    // code for clone and insert  ...
    $("#newly_created_object").slideDown(500);
}

How can I prevent the next while-loop from firing before the .slideDown() animation (or any other kind of animation for that matter) ends ?

Thank you in advance !

Answer 1

You might want to create and insert all of the elements first, storing them in an array. Then you can use a recursive function to pop one element off the array and animate it, calling your function on the remaining elements in the callback handler for the animation — to ensure that the first is complete before the next starts.

    ...
    var elems = [];
    while (statement) {
        var elem = ...clone and insert element, returning element...
        elems.push(elem);
    }

    animateElems( elems);
}


function animateElems( elems )
{
    if (elems.length > 0) {
        var elem = elems.shift();
        $(elem).slideDown( 500, function() {
             animateElems( elems );
        }
    }
}