jquery multiple callbacks to keep animation order

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() {    开发者_如何学Go
     $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.

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