jquery multiple callbacks to keep animation order

Question

Its only my 2nd day using this so im sorry if theres an obvious error here. Im trying to have 3 functions execute one after the other on load event, but the 3rd callback function cancels out the 2nd. Are you allowed 3? If no whats the way around it.

$j(window).ready(function() {    
     $j("#content").animate({
        marginLeft: parseInt($j("#content").css('marginLeft'),10) == 0 ?
        $j("#content").outerWidth() : 0
    },function(){
        $j(".headerImg").slideToggle(900);
        },function(){
        $j(".headerTitleImg").slideDown(100);}
    );
});

Thank You.

Answer 1

You are calling the animate method with two callback functions: animate(properties, callback, callback). The documentation only specifies the use of one callback function, but it's possible that it allows more. Hoever, if it does, the second callback will then be called when the first returns, it won't wait for any animation that the first started.

The solution is to make the second function a callback to the first functions slideToggle call:

$j(window).ready(function() {    
  $j("#content").animate(
    {
      marginLeft: parseInt($j("#content").css('marginLeft'),10) == 0 ?
      $j("#content").outerWidth() : 0
    },
    function(){
      $j(".headerImg").slideToggle(
        900,
        function(){
          $j(".headerTitleImg").slideDown(100);
        }
      );
    }
  );
});