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');
});