jQueryでのエフェクト終了後のアクション

時には、エフェクトが終了した後に何らかのアクションを実行する必要があるかもしれません。例えば、ボタンをクリックすると、あるブロックが滑らかに非表示になり、完全に非表示になった後にのみ、画面に何かを表示する必要がある場合です。

単にコードの行を次々に記述するだけでは、要素が非表示になる前に次の行のコードが実行され始めてしまい、期待した結果になりません。ボタンをクリックしてみてください。要素が非表示になり始めると同時に、ボタンのテキストがすぐに変更されます。

次の例を見てみましょう。次のようなHTMLコードがあるとします：

<button id="hide">hide</button>
<div id="elem">text...</div>

このコードには、次のCSSが適用されています：

#elem {
	padding: 10px;
	width: 150px;
	height: 150px;
	border: 1px solid green;
	margin-top: 10px;
}

Javascriptコードは次のようになります：

$('#hide').click(function() {
	$('#elem').hide(1000);
	$('#hide').html('hidden');
});

このような問題を避けるために、アニメーションやエフェクトを扱うすべてのメソッドには、オプションのパラメータが用意されており、アニメーション終了後に実行されるコールバック関数を渡すことができます。私たちの場合、コールバック関数を hide メソッドに渡し、その関数の本体ですでにボタンの名前を変更しました：

$('#hide').click(function() {
	$('#elem').hide(1000, function() {
		$('#hide').html('hidden');
	});
});