多个元素的jQuery动画回调答案

【问题标题】：Callback for jquery animation for multiple elements多个元素的jQuery动画回调
【发布时间】：2012-04-11 20:35:01
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery callback jquery-animate

【解决方案1】：

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

【讨论】：

简单、优雅、完全 jQuery。非常好。

【解决方案2】：

你去吧，只是添加了一个简单的计数器:)

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

【讨论】：

【解决方案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;
 }

【讨论】：

我需要先定位元素，这就是为什么我首先要 scrollLeft...

【解决方案4】：

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

$(':animated').length

在完成回调时：

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

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

【讨论】：

哇。我不会来这个。我以前不知道 :animated 选择器。我认为应该在 .animate() 文章中链接？绝对帮助了我。

【解决方案5】：

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

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

【讨论】：