callback for jquery animation for multiple elements

问题

As you can see at this Fiddle, I animate more than one element at once, which is happening as I wish. But in the next step, I would like to do things ONCE the animation for all elements is over. Which does not seem to be possible by using the complete-function, because it is it fired for EACH completed animation (3 elemets, 3 times complete callback). the jquery .animate() API also says:

If multiple elements are animated, the callback is executed once per matched element, not once for the animation as a whole.

So, do you have any idea what I can do to have an event fired when every single animation has finished?

回答1:

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

回答2:

There you go, just added a simple counter :)

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

回答3:

You can create a variable and count each time the animation is finished. If it equals 3 (or whatever number you want), call another function. See this 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;
 }

回答4:

In your case, you can view currently animated with:

$(':animated').length

and on complete callback:

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

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

回答5:

The accepted answer was a little unclear to me at first how to handle unrelated elements. Eventually I arrived at this answer:

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

来源：https://stackoverflow.com/questions/10113528/callback-for-jquery-animation-for-multiple-elements

标签

jquery

callback

jquery-animate

complete