title: Wait till a Function with animations is finished until running another Function
body: <p>I'm having an issue with normal (<strong>non-ajax</strong>) functions that involve lots of <strong>animations</strong> within each of them. Currently I simply have a <code>setTimeout</code> between functions, but this isn't perfect since no browsers / computers are the same.</p>
  
  <p><strong>Additional Note: They both have separate animations/etc that collide.</strong></p>
  
  <p>I can't simply put one in the callback function of another</p>
  
  <pre><code>// multiple dom animations / etc
  FunctionOne();
  
  // What I -was- doing to wait till running the next function filled
  // with animations, etc
  
  setTimeout(function () { 
      FunctionTwo(); // other dom animations (some triggering on previous ones)
  }, 1000); 
  </code></pre>
  
  <p>Is there anyway in js/jQuery to have:</p>
  
  <pre><code>// Pseudo-code
  -do FunctionOne()
  -when finished :: run -&gt; FunctionTwo()
  </code></pre>
  
  <p>I know about <code>$.when()</code> &amp; <code>$.done()</code>, but those are for AJAX...</p>
  
  <hr>
  
  <ul>
  <li><strong>MY UPDATED SOLUTION</strong></li>
  </ul>
  
  <p>jQuery has an exposed variable (that for some reason isn't listed anywhere in the jQuery docs) called $.timers, which holds the array of animations currently taking place.</p>
  
  <pre><code>function animationsTest (callback) {
      // Test if ANY/ALL page animations are currently active
  
      var testAnimationInterval = setInterval(function () {
          if (! $.timers.length) { // any page animations finished
              clearInterval(testAnimationInterval);
              callback();
          }
      }, 25);
  };
  </code></pre>
  
  <p>Basic useage:</p>
  
  <pre><code>// run some function with animations etc    
  functionWithAnimations();
  
  animationsTest(function () { // &lt;-- this will run once all the above animations are finished
  
      // your callback (things to do after all animations are done)
      runNextAnimations();
  
  });
  </code></pre>