I'm trying to create an effect that works in a queue, so that each effect starts only after the previous one finished. I was successful, but I'm sure that there's a cleaner way.

This is what I have so far:

$("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's gotta be a cleaner way, right?

Much obliged in advance.

I'm trying to create an effect that works in a queue, so that each effect starts only after the previous one finished. I was successful, but I'm sure that there's a cleaner way.

This is what I have so far:

$("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's gotta be a cleaner way, right?

Much obliged in advance.

• javascript
• jquery
• jquery-animate

3 Answers 3

Just as you say in your question. Use .queue().

http://api.jquery./queue

and check:

What are queues in jQuery?

Ouch, that's horrid! I'd do it by 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()
        }
    });
});

You could 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 it is all very hardcoded....