【jQuery】Deferred でアニメーションを順番付ける
Deferredクラスの使い方、
アニメーションを順番に表示させる方法です。
通常はDeferredクラスはajaxで使ってなんぼだからか、
アニメーションの順序実行(= 返り値を次の関数で使わない & ajaxをつかわない)
に関しては、私感だけれど、ほとんどのサイトでは正しい説明がなかったと思う。
唯一、このサイトの通りにしたら動いた。
http://foreignkey.jp/archives/1065
then() の中の処理が非同期な場合には、その完了をもって resolve() する Promise オブジェクトを返す promise() メソッドを持ったオブジェクトを返す必要がある。
なお、then() に与えられた関数が promise() メソッドを持ったオブジェクトを返さない時、then は即座に次の then() や done() に処理を移します。つまり、何も待ちません。
実行コード
ポイントは、return しているところ。
jQuery(document).ready( function() { var dfd = $.Deferred(); dfd.then( function(){ return $("#anime1").animate( { marginLeft: "150px", }, 500 ) } ).then( function(){ return $("#anime2").show("slow") } ); dfd.resolve(); } );
jQuery 難しい・・・。括弧がいっぱいあるのが無理><!