なんとも今さら感のある話題ですが、知らない人もいるかもしれないので備忘録。
アニメーションを順番に動かすやり方には色々ありますが、僕はさくっと便利に使える $.Deferred がお気に入りです。

$(element).animate() だけ使って複数のアニメーションを順番に動かそうとすると、コールバック関数の入れ子地獄になるんですよね。
3つのアニメーションだけでもこのありさまです。

$("#elem_1").animate({width: "30px"}, {duration: 800, complete:function(){
  $("#elem_2").animate({width: "40px"}, {duration: 400, complete:function(){
    $("#elem_3").animate({width: "50px"}, {duration: 200});
  }});
}});

delay使って頑張っちゃうパターンもたまーに見ますが、ちょっとタイミング変えたいときにとても不便でイケてない。

$("#elem_1").animate({width: "30px"}, {duration: 800});
$("#elem_2").delay(800).animate({width: "40px"}, {duration: 400});
$("#elem_3").delay(1200).animate({width: "50px"}, {duration: 200});

$.Deferred を使うとこんな感じにすっきりします。

$deferred = $.Deferred(function(deferred){
  deferred.then(function(){
    return $("#elem_1").animate({width: "30px"}, {duration: 800});
  }).then(function(){
    return $("#elem_2").animate({width: "40px"}, {duration: 400});
  }).then(function(){
    return $("#elem_3").animate({width: "50px"}, {duration: 200});
  })
});
$deferred.resolve();

それぞれのアニメーションタイミングが依存しあわないし、入れ子にもならないので順番の入れ替えもとても簡単。
可読性と保守性が高いですね。

サンプルは以下よりどうぞ
http://jsbin.com/qoxoqihotifa/1/watch

詳しい使い方は公式ドキュメント見るなりしてみてください。
$.Deferred、便利です。