jQuery.Deferredでアニメーション

jQuery.Deferredは非同期処理を扱いやすくするための標準モジュールとしてバージョン1.5から導入されました。
通常、連続したアニメーションを実装する場合、コールバック関数を使用したり、delayやsetTimeoutで時間で管理したりするかと思いますが、メンテナンス性が悪くなり間にアニメーションを追加する場合などの対応がしづらくなってしまいます。
そこでアニメーションごとに関数化してjQuery.Deferredで順序立てて実行することによって可読性とメンテナンス性を良くすることができます。

実装方法

jQuery.Deferredの実装方法として、アニメーションごとに関数化しその中でDeferredオブジェクトを生成し、アニメーションが終わったらDeferredオブジェクトの状態ををresolvedにしpromiseを返すことによって次のアニメーションにつなげます。
関数化したアニメーションをthenでつなげることで順序立ててアニメーションを実行することができます。

function animation1(){
  var d = $.Deferred();
  $('#animation1').animate({width:'500px'}, 1000, function(){
    d.resolve();
  });
  return d.promise();
}

function animation2(){
  var d = $.Deferred();
  $('#animation2').animate({width:'500px'}, 500, function(){
    d.resolve('アニメーション終了');// resolveに引数を設定することによって値を渡すこともできます
  });
  return d.promise();
}

animation1()
  .then(function(){
    return animation2();
  })
  .then(function(data){
    alert(data);// 'アニメーション終了'のアラート
  });

animation1とanimation2の間にアニメーションを追加するときも、追加アニメーションを関数化しthenの間に関数を追加すればいいのでメンテナンス性もいいです。

上記を元にしたデモはこちら。

See the Pen jQuery.Deferred by Daisuke Iso (@kojilow) on CodePen.light