【質問です】jQueryで処理を指定の順序で行う

試行錯誤の結果、思うような効果を実装出来そうですので
後ほど記録としてまとめたいと思います。

---

HTMLとCSSでレイアウトされた文字（各文字はabsoluteで絶対配置）に
以下のような処理を順番にさせたいと考えています。

処理① 任意の秒数後に非表示
↓
処理② 配置と文字サイズを変えて表示→任意の秒数後に非表示
↓
処理③ 配置と文字サイズを変えて表示→任意の秒数後に非表示
　:
　:

処理①→②や、処理①→③など、処理が二つだけの場合は
処理①が終わってから次の処理が実行されるのですが、
処理①→②→③とすると、真ん中の②が飛ばされ、処理①→③となります.....

console log();で確認すると、
処理①の後に②③が同時に開始してしまっています。

上記の後は処理④⑤と続く予定で、その間ごとに処理③を呼び出したいため
管理のし易さからコールバックで入れ子にしていくのではなく
各処理を関数として順番に呼び出すような方法を探していて
.defferdや.whenに辿り着きました。

簡単なjQueryしか書いたことがなく、知識不足でお恥ずかしいですが、
私の望む処理を行う場合にこれらは適切ではないでしょうか。
ご指摘やアドバイス頂けましたら幸いです。

defferdの使い方はこちらのサイトを参考にさせていただきました。
【jQuery.Deferredでわかりやすく順番にアニメーションする方法】
　http://goo.gl/lS2WUw

HTML

<ul class="today_word">
 <li class="word_1">あ</li>
 <li class="word_2">い</li>
    :
    :
</ul>

jQuery

kanaShort()
 .then(word_1)
 .then(kanaLong);

 // 処理① 文字を非表示
 function kanaShort() {
   var d = new $.Deferred;
   $('.today_word').delay(500).fadeOut(700);
   d.resolve();
   return d.promise();
 }

 //  処理② 1文字目を大きく他を小さく
 function word_1() {
   var d = new $.Deferred;
   $.when(
      $('.word_1').css({
         top: '245px',
         left: '135px',
         fontSize: '8em'
     }),
      $('.word_2').css({
         top: '348px',
         left: '320px',
         fontSize: '3em'
      }),
      $('.today_word').delay(500).fadeIn(200)
    ).done(function() {
      $('.today_word').delay(1500).fadeOut(300);
      d.resolve();
   });
   return d.promise();
 }

 // 処理③ 文字の大きさを戻し並べる
 function kanaLong() {
   var d = new $.Deferred;
   $.when(
      $('.word_1').css({
         top: '155px',
         left: '105px',
         fontSize: '5em'
      }),
      $('.word_2').css({
         top: '155px',
         left: '190px',
         fontSize: '5em'
      }),
      $('.today_word').delay(500).fadeIn(200)
   ).done(function() {
      $('.today_word').delay(2000).fadeOut(300);
      d.resolve();
   });
   return d.promise();
 }