22

I know how to wait till an animation is done with

$('#element').animate(speed,function(){
//code here
});

and with multiple elements with

$('#element1, #element2').promise().done(function(){
//code here
});

but how do I wait till all of the elements on the page are done animating? I would much rather not just put in every element that I'm waiting for in there.

Brian Leishman
  • 8,155
  • 11
  • 57
  • 93

2 Answers2

50

To select everything that's being animated currently, just do $(":animated") http://api.jquery.com/animated-selector/

Combining that with what you already have there, it'd just be

$(":animated").promise().done(function() {
    //code here
});
Moshe Katz
  • 15,992
  • 7
  • 69
  • 116
Jeremy T
  • 1,273
  • 1
  • 10
  • 14
10

The answer given by Jeremy T works fine - although based on the comments on the jquery site he linked (http://api.jquery.com/animated-selector/), it would be a faster solution to add a class to each element on the page that may be animated, and then select them using

    $('.animationclass').filter(':animated').promise().done(function() {
//Your function
});
Tony Carbone
  • 484
  • 4
  • 10