jQuery $.animate() 多个元素但只触发一次回调

Question

如果您选择一个类或元素集合来使用 jQuery 制作动画:

$('.myElems').animate({....});

然后还使用回调函数，最终会产生大量不必要的 animate() 调用。

var i=1;
$('.myElems').animate({width:'200px'}, 200, function(){
    //do something else
    $('#someOtherElem').animate({opacity:'1'}, 300, function(){        
        if (i>1) console.log('the '+i+'-th waste of resources just finished wasting your resources');
        i++;
    });
});

可以说，这只是糟糕的代码和/或设计 - 但是我可以做些什么来避免进行许多 animate() 调用，其中只有一个使用回调，并且有一个负载不必要的回调执行和破坏我的代码/预期行为？

理想情况下，我只能编写一个仅运行一次的“一次性”回调 - 否则也许有一种有效的方法来测试某些内容是否已由 jQuery 进行动画处理？

示例:http://jsfiddle.net/uzSE6/ (警告 - 这将显示大量警报框)。

Answer 1

您可以使用when像:

$.when($('.myElems').animate({width: 200}, 200)).then(function () {
  console.log('foo');
});

http://jsfiddle.net/tyqZq/

替代版本:

$('.myElems').animate({width: 200}, 200).promise().done(function () {
  console.log('foo');
});