せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【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 難しい・・・。括弧がいっぱいあるのが無理><!