Colas de efectos en Javascript

Question

Estoy intentando crear un efecto que funcione en una cola, de modo que cada efecto se inicie solo después de que haya terminado el anterior. Tuve éxito, pero estoy seguro de que hay una manera más limpia.

Esto es lo que tengo hasta ahora:

$("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(); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

Tiene que haber una forma más limpia, ¿verdad?

Much forzado de antemano.

Answer 1

¡Ay, eso es horrible! Lo haría usando 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

Tal como dices en tu pregunta. Use .queue().

http://api.jquery.com/queue

y comprobar:

What are queues in jQuery?

Answer 3

Usted podría hacer una función recursiva:

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); 

Pero todo es muy codificado ....