jQueryでアニメーションを実行させる「.animate()」。

一つのfunctionの中で複数実行させることも可能だったりするのですが、
アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、
という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、
ここにメモ書きがてら紹介してみます。

jQueryでアニメーション処理完了後に別の処理を実行

$(function(){
	$(セレクタ).stop().animate({アニメーション処理},1000,function(){
		~ここに処理を記載~
	});
});

例えば、画像にマウスオーバーした際に、
画像をアニメーション拡大させ、
拡大処理完了後に影を付ける(CSS3で)場合は。

$(function(){
	$('img').hover(function(){
		$(this).stop().animate({width:'200px',height:'200px'},500,function(){
			$(this).addClass('shadow');
		});
	},function(){
		$(this).removeClass('shadow');
		$(this).stop().animate({width:'100px',height:'100px'},500);
	});
});

こんな感じの書き方で実現できます。

これを実行させると以下の様な感じになります。(画像にマウスオーバーしてください)

画像の拡大処理が完了した時点で、画像に影が付きます。
影を付ける処理はCSSでクラス「shadow」を付けることで実現しています。

先日の遅延処理「jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法」と合わせることで
様々なタイミングでアニメーションを制御することが可能になったりもします。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでアニメーション処理(「.animate()」)完了後に別の処理を実行させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner