Javascript Effect Queues

Question

I am trying to create an effect that runs in a queue, so that each effect only starts after the previous one is completed. I have been successful, but I'm sure there is a cleaner way.

This is what I still have:

$("tr:last td:nth-child(1) div").slideUp(200, function() { $("tr:last td:nth-child(2) div").slideUp(200, function() { $("tr:last td:nth-child(3) div").slideUp(200, function() { $("tr:last td:nth-child(4) div").slideUp(200, function() { $("tr:last td:nth-child(5) div").slideUp(200, function() { $("tr:last td:nth-child(6) div").slideUp(200, function() { $("tr:last td:nth-child(7) div").slideUp(200, function() { $("tr:last").remove(); }); }); }); }); }); }); }); 

There must be a cleaner way, right?

Very important in advance.

Answer 1

Oh, that’s awful! I would do this using delay :

 var divs = $("tr:last td div"); divs.each(function(idx, el) { $(this).delay(idx * 200).slideUp(200, function(){ if (idx === divs.length - 1) { // 0-based index $("tr:last").remove() } }); }); 

Answer 2

As you say in your question. Use .queue() .

http://api.jquery.com/queue

and check:

What are queues in jQuery?

Answer 3

You can make a recursive function:

 function slide(i) { if(i < 8) { $("tr:last td:nth-child(" + i + ") div").slideUp(200, function() { slide(i+1); }); } else { $("tr:last").remove(); } } slide(1); 

But all this is very tough.