Question

Well I have a AJAX calls being performed while I animate some content.

I want to fire a callback after both are finished successfully?

Any idea?

EDIT: fix typos in the title

Answer 1

This sounds like a good candidate for jQuery Deferred

Here’s some rough code on how it would work.

function doAjax(){
   return $.get('foo.htm'); // or $.ajax, $.getJSON.....etc 
}

function doAnimation(){
   var dfd = $.Deferred();
   $("div").fadeIn(800).delay(1200).fadeOut(300, dfd.resolve);
   return dfd.promise();
}

$.when( doAjax(), doAnimation() )
 .then(function(){
    console.log( 'I fire once BOTH have completed!' );
 })
 .fail(function(){
    console.log( 'I fire if one or more requests failed.' );
 });

Some references:

http://api.jquery.com/promise/

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

As per some comments i checked to make sure both animation and ajax calls execute in parallel and as expected, they do. http://jsfiddle.net/Gdqfp/4/