デモページ

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

fadeOutの例

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

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

期待通りに動かない例

// #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でいただきましたので追記です^^