jquery - 多个元素的jQuery动画回调

Question

正如您在此 Fiddle中看到的那样，我一次为多个元素设置动画，这正如我所愿。但在下一步中，我想在所有元素的动画结束后做一些事情。使用完成函数似乎不可能，因为它是为每个完成的动画（3 个元素，3 次完成回调）触发的。jquery .animate()API 还说：

如果为多个元素设置了动画，则每个匹配的元素都会执行一次回调，而不是对整个动画执行一次。

那么，您知道我可以做些什么来在每个动画完成时触发一个事件吗？

Answer 1

...animate(...).promise().done(function(){console.log("animate complete!")})

Answer 2

好了，刚刚添加了一个简单的计数器 :)

http://jsfiddle.net/Pz5YB/24/

Answer 3

您可以创建一个变量并在每次动画完成时进行计数。如果它等于 3（或您想要的任何数字），请调用另一个函数。看到这个jsfiddle

function animateAll(){
if(flag) return;
flag = true;
 //$('.list-wrapper').scrollLeft(w); // not sure why you need this
 //$('.table-wrapper').scrollLeft(w); // or this
 $('.list-wrapper, .table-wrapper').animate({
     scrollLeft: 2*w,
   }, function(){
       countAni++;
       console.log('finish');
       if(countAni == 3) finishAni()
   }     
 );
 function finishAni(){
     alert('whoohoo ready');   
     flag = false;
 }

Answer 4

在您的情况下，您可以查看当前动画：

$(':animated').length

并在完成回调时：

if($(':animated').length==1)
     console.log('whoohoo ready');

http://jsfiddle.net/Pz5YB/25/

Answer 5

起初，接受的答案对我来说有点不清楚如何处理不相关的元素。最终我得到了这个答案：

 $.when(
     $someElement.animate(...).promise(),
     $someOtherElement.animate(...).promise()
).done(function() {
    console.log("whoohoo ready");
});