javascript - Jquery - 推迟回调直到多个动画完成

Question

我需要在多个元素完成动画处理后执行一次回调。 我的 jquery 选择器如下:

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

这样做的问题是，按钮类匹配了许多元素，所有这些元素都需要在执行回调之前淡入。就目前而言，回调是在每个单独的元素完成动画后执行的。这不是所需的功能。我正在寻找一种优雅的解决方案，以便我的回调仅在所有匹配的元素完成动画处理后执行一次。这个问题在包括 SO 在内的一些地方出现过，但从来没有一个优雅的答案(甚至没有一个明确的答案——适用于一个人的解决方案对其他人根本不起作用)。

Answer 1

jQuery 引入了 promise在 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
});