$.animate()でのコールバック地獄を回避する

jqueryで、あるアニメーションの終了後に次のアニメーションを続けたいということがあった。
普通に書くとコールバック地獄に陥ってしまうので、Promiseっぽくthenチェーンで書きたい。
jquery的に書くなら、毎回$.Deferredでラップして書いていかないとダメなのかなと思ってたら、$.animate()に$.promise()をつなげると$.Deferredが返ってくるので、それを使ったら簡潔に書けた。

$el.animate({ left: 100 }).promise()
  .then(function () {
    return $el.animate({ left: 200 });
  })
  .then(function () {
    return $el.animate({ left: 300 });
  });

もうちょい複雑なデモ

thenの中で返してるオブジェクトは、promiseを持ってたら次のthenまでいくので、thenで返すオブジェクトにpromiseをつなげる必要はない。
コードこの辺