Wait till a Function with animations is finished until running another Function

You can use jQuery's $.Deferred

var FunctionOne = function () {  // create a deferred object  var r = $.Deferred();  // do whatever you want (e.g. ajax/animations other asyc tasks)  setTimeout(function () {    // and call `resolve` on the deferred object, once you're done    r.resolve();  }, 2500);  // return the deferred object  return r;};// define FunctionTwo as neededvar FunctionTwo = function () {  console.log('FunctionTwo');};// call FunctionOne and use the `done` method// with `FunctionTwo` as it's parameterFunctionOne().done(FunctionTwo);

you could also pack multiple deferreds together:

var FunctionOne = function () {  var    a = $.Deferred(),    b = $.Deferred();  // some fake asyc task  setTimeout(function () {    console.log('a done');    a.resolve();  }, Math.random() * 4000);  // some other fake asyc task  setTimeout(function () {    console.log('b done');    b.resolve();  }, Math.random() * 4000);  return $.Deferred(function (def) {    $.when(a, b).done(function () {      def.resolve();    });  });};

http://jsfiddle.net/p22dK/

add the following to the end of the first function

return $.Deferred().resolve();

call both functions like so

functionOne().done(functionTwo);

Along with Yoshi's answer, I have found another very simple (callback type) solution for animations.

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.

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);};

Basic useage:

functionOne(); // one with animationsanimationsTest(functionTwo);

Hope this helps some people out!