Not allowing next jqueryui.show() animation to start without finishing previous one

Question

Im using jquery &jquery UI.

$.each(data, function(count,item)
{
    showItem(item); // Dont continue without showItem finishing
});

function showItem(item)
{
    $('#div-container').prepend(renderItem(item));    
    $("#div-container div.block:first").show('blind',{},500,function(){});    
}

Works, but when there are 3 items in data, it animates all 3 in one go. I need this done one-by-one. How do I tell .show() to execute the next show() after the previous one is completed ? Or do I specify this in each() ?

Answer 1

I think the best way to do that would be in the show method by adding a complete handler to show the next item once show has completed on the current item...

Answer 2

You'll have to work some custom animation handling in for this. Take a look at Simultaneous Animations to get you started.

Answer 3

I solved it by not using each. I set the next animation in the callback instead.

var animationInProgress = false;

showItem(data.length-1, data);

function showItem(i,data)
{
    animationInProgress = true; 
    $('#div-container').prepend(renderItem(data[i]));
    $("#div-container div.block:first").show('blind',{},500,function()
    {        
        $("#div-container div.block:last").remove();
        if (--i >= 0)
         showItem(i, data);
        else
         animationInProgress = false; 
    });            
}