Javascript Jquery-延迟回调直到多个动画完成

我需要一个回调在多个元素完成动画制作后执行一次。 我的jquery选择器如下所示：

$('.buttons').fadeIn('fast',function() {
   // my callback
});

问题是buttons类与许多元素匹配，在执行回调之前，所有元素都需要淡入。现在，回调是在每个元素完成动画制作后执行的。这不是期望的功能。我正在寻找一个优雅的解决方案，这样我的回调只在所有匹配元素完成动画制作后执行一次。这个问题已经在一些地方出现了，包括SO，但从来没有一个优雅的答案（甚至也没有一个明确的答案——对一个人有效的解决方案对其他人根本不起作用）

---

未测试，但这应仅将回调应用于最后一个按钮。

除了@Ross的答案外，另一个答案将始终触发最后一个按钮上的回调淡入（这可能是或可能不是最后一个被告知设置动画的按钮）可能是：

var buttons = $(".buttons");
var numbuttons = buttons.length;
var i = 0;

buttons.fadeIn('fast', function() {
    i++;
    if(i == numbuttons) {
        //do your callback stuff
    }
});

---

我的解决方案背后的想法是保留一个计数器。每当动画结束时，您只需增加此计数器，这样您就可以看到最后一个按钮的显示时间。记住在完成所有操作后将计数器设置回零，因为您可能希望重复此操作（再次隐藏它们，然后再次显示它们）

jQuery在1.6版中引入了一个新的计数器，比添加计数器要优雅得多

例如：

// Step 1: Make your animation
$(".buttons").each(function() {
    $(this).fadeIn("fast");
});

// Step 2: Attach a promise to be called once animation is complete
$(".buttons").promise().done(function() {
    // my callback
});

---

要将不相关的元素动画收集到单个回调中，可以执行以下操作：

$.when(
    $someElement.animate(...).promise(),
    $someOtherElement.animate(...).promise()
).done(function() {
    console.log("Both animations complete");
});

---

可能执行一个.each（）函数，每次元素的动画完成时，递增一个计数器。当计数器达到要设置动画的元素数时，运行回调函数？可能是@Chris的重复，谢谢，我还没有看到这个问题-太完美了！此外，与下面的@Riley和@Ross'答案非常相似。这应该是答案。是否会调用done（）中的回调函数来完成$（'buttons'）中的每个元素，或者在它们都已解析时调用它们？@TimeEmit-仅当所有元素都已完成动画制作时才调用。这与“完成”回调，甚至是您可以作为选项传递的“完成”承诺回调形成对比。我同意这是一个更好的解决方案。如果我可以将此指定为可接受的答案，我会这样做。无需调用JQuery选择器两次或

每个

函数（在这种情况下，…调用JQuery多元素选择器的链接动画将需要它）

$（“.buttons”）.fadeIn（“fast”）.promise（）.done（函数{//completion callback}）就足够了这可能看起来很简单，而且它确实工作得很好，但是下面@Underworld的回答中描述了一种更好的方法来实现这一点。还要注意，您可以在数组中收集这些承诺，然后使用
apply
和
when
，就像我做的那样：
$.when.apply（$，animationpromissions）.done（function（）{console.log（“done”；}）；
无需调用
。
对
$的参数进行承诺。
时，它会自动为您执行此操作。@Alnitak漂亮的建议，我不知道+1@parliament谢谢，这正是我想要的。这里有一个JSFIDLE示例：这个答案帮助了我。我在数组中有我的承诺，我使用了jQuery“apply（）函数调用“when”方法。
onClickBtnEdit = function(){
    var $EditDel = $($btnEdit).add($btnDel);
    var btns = $EditDel.size();

    $EditDel.fadeOut("def",function(){                   
        btns--;
        if(btns===0){
            $($btnSave).add($btnCancel).fadeIn("slow");
        }
    });
};

// Step 1: Make your animation
$(".buttons").each(function() {
    $(this).fadeIn("fast");
});

// Step 2: Attach a promise to be called once animation is complete
$(".buttons").promise().done(function() {
    // my callback
});

$.when(
    $someElement.animate(...).promise(),
    $someOtherElement.animate(...).promise()
).done(function() {
    console.log("Both animations complete");
});