jQueryでアニメーションが終了してから処理をさせる

jQuery

jQueryでアニメーションが確実に終了した後に、特定の処理を実行させたい時の注意点などです。

そのまま処理をアニメーションの次の行に処理を書いていると期待通りには動いてくれません。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

デモページ

簡単なデモページを用意しました。

fadeOutの例

jQueryで以下のようなアニメーション処理を考えてみましょう。

  1. 要素をフェードアウトする
  2. フェードアウト完了後に要素を削除する

では、この処理を実現するために以下のような処理を書いたとします。

期待通りに動かない例

// #boxをフェードアウト
$( '#box' ).fadeOut( 1500 );

// #boxの削除
$( '#box' ).remove();

フェードアウト後に、要素の削除が実行されるのかというとそうではなくいきなり要素が削除されたように見えます。

期待通りに動く例

これを以下のように記述すると期待した動きになります。

$( '#box2' ).fadeOut( 1500, function() {
	$( '#box2' ).remove();
});

また、以下のように書く事も出来ます。

$( '#box2' ).fadeOut( 1500, boxRemove );

function boxRemove() {
	$( '#box2' ).remove();
}

animateの例

animateメソッドを使用する場合の例も考えてみましょう。
animateでアニメーション後に要素を削除したい場合です。

期待通りに動かない例

$( '#box' ).animate({ 
	width: '70%',
	opacity: 0.4,
	marginLeft: '0.6in',
	fontSize: '3em', 
	borderWidth: '10px'
}, 1500 );
$( '#box' ).remove();

期待通りに動く例

$( '#box' ).animate({ 
	width: '70%',
	opacity: 0.4,
	marginLeft: '0.6in',
	fontSize: '3em', 
	borderWidth: '10px'
}, 1500, function() {
	$( '#box' ).remove();
});

もう一つ注意点

アニメーションが繰り返し実行される可能性がある場合は、事前にstopで止めとくことも大事だねってアドバイスをTwitterでいただきましたので追記です^^

  

共有やブックマークなど