jQueryのanimate()完了後に実行したい処理がある場合の記述方法

animate完了後に実行したい

jQueryのanimateを使うことでスライドショーなどのアニメーションを作れますが、アニメーション完了後に処理をしたい場合があります。

その場合はこうします。

PR

まずはサンプル

画面をクリックすると、画像が右に移動します。
移動し終わったあとで画像サイズが変化します。

もう一度確認する場合は、再読み込みしてください。

WEB-LABO

今回の処理
　画面をクリックされたら、画像を右に300px移動します。
　移動が完了したら、画像の横幅を100pxに変更します。

animate()の処理
　margin-left:300pxで右にずらします。

animate()完了後の処理
　画像の横幅を100pxにします。

<img class="weblabo" src="http://www.web-labo.jp/wp-content/uploads/2013/02/WEB-LABO.png" alt="WEB-LABO">

jQueryで制御するため、imgタグに「weblabo」というクラス名をつけています。 

$(window).click(function(){
	$(".weblabo").animate({
		//アニメーション
		"margin-left":"300px"
	},{
		complete:function(){
			//animate完了後に実行
			$(".weblabo").css({
				"width":"100px"
			});
		}
	});

});

 

書式

余分な部分を削除したコードが次のようになります。

$("セレクタ").animate({
	//ここがアニメーションの指定
},{
	complete:function(){
		//ここがanimate完了後に実行
	}
});

animateに関しては、他のオプションもありますので、色々試してみてください。

関連記事