Sequentially $()show from within a function

Question

I use a function that onclick runs to read an xml catalog and opens a thumbnail for each catalog entry.

I want the script to open each thumb suquentially. And logically I feel it should do that as the show command is at the end of the for loop. But the function runs and all the thumbnails show at the same time. How can I change this? Why does this happen?

function showproductthumbnails() {

for (i=0;i<xmlcatalog.length;i++){ 

$(catalogitem+i).show("fold", {size:3}, 300);   

}

}

Note that the code above is just the abstract with the meat taken out, but the problem remains.

Answer 1

How can I change this?

You can add a small delay ^[docs]:

$(catalogitem+i).delay(i*100).show("fold", {size:3}, 300);

Why does this happen?

The loop is amazingly fast and calling show like this is not blocking. Animation functions are asynchronous.