Effect Queues in Javascript
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.
Just as you say in your question. Use .queue()
.
http://api.jquery.com/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....
精彩评论