Code effetto in Javascript

Question

Sto cercando di creare un effetto che funzioni in una coda, in modo che ogni effetto inizi solo dopo che è terminato quello precedente. Ho avuto successo, ma sono sicuro che c'è un modo più pulito.

Questo è quello che ho finora:

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

Ci deve essere un modo più pulito, giusto?

Molto obbligato in anticipo.

Answer 1

Ahi, è orribile! Lo farei 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

Proprio come dici nella tua domanda. Utilizzare .queue().

http://api.jquery.com/queue

e verificare:

What are queues in jQuery?

Answer 3

È potrebbe fare una funzione ricorsiva:

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

Ma è tutto molto codificato ....