Defferdを使って、処理する順番をよりわかりやすくしてアニメーションする方法をご紹介いたします。並べるアニメーションの数が増えてきた場合は、コールバック関数の中にコールバック関数があるという入れ子の状態が多重になり、とてもプログラムとして見にくいものとなります。順番を入れ替える必要が出てきたときにも、書き換える作業が煩雑になってしまいます。その問題を解決してくれるのが、jQuery1.5から導入された標準モジュールであるjQuery.Deferredです。jQuery.Deferredは、非同期処理を扱いやすくするために導入されたもので、これを利用することで、これまでコールバック関数を鬼のように組まなければならなかった処理を、とても簡潔にまとめることができます。方法1.並べるそれぞれの関数にjQuery.Defferdを設定するi.それぞれの関数内で、任意の名前でDeferredオブジェクトを作ります。//dは任意の名前ii.関数内のアニメーションのコールバック関数でresolveを知らせる。JavaScriptd.resolve();1d.resolve();iii.関数の最後でpromiseを返す。d.promise();}のような形に直します。2.関数を繋げる以上の準備ができたら、いよいよ関数の実行部分を記述します。記述方法は、次のように最初実行する関数に、.then(関数名)という形で記述していくだけです。順番に実行されるようになります。↓コチラが実際のDEMOです。実行部分の記述が簡潔なので、並べ方で迷うこともありませんでした。次のようにリプレイの設定をするのも簡単にできました。並べるアニメーションが多い場合は、とても便利な方法だと思います。ProfileninomiyaWebデザイナー兼コーダーです。イラストを描くのも好きです。SVGとCanvasを使ったWEBアプリにも興味があります。