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の実行を遅らせる方法」と合わせることで
様々なタイミングでアニメーションを制御することが可能になったりもします。
ご参考までに。。。