jQuery逆引きリファレンス
アニメーションを一時停止するには？（delay）
実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。
別稿「TIPS：あらかじめ用意されたアニメーションを実行するには？」でも触れたように、jQueryでは汎用的なanimateをはじめ、目的特化したhide、slideUpなど、さまざまなアニメーションメソッドが用意されています。これらは単体で利用することもできますし、メソッドチェーンで連結することで、複数のアニメーションを順に実行することも可能です。
そして、実行中のアニメーションを途中で一時停止する（＝以降のアニメーションを一時待機させる）のがdelayメソッドの役割です。
さっそく、具体的な例も見てみましょう。以下のコードと実行結果は、並んだ2つの画像をそれぞれ以下のようにアニメーションさせる例です。
- 非表示（3秒）⇒休止（3秒）⇒表示（3秒）
- 非表示（3秒）⇒表示（3秒）
以下が、そのコードと実行例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div width="400px;">
<div id="logo1" style="position: absolute; left: 0px;">
<img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
<div id="logo2" style="position: absolute; left: 180px;">
<img src="http://www.web-deli.com/image/home_chara.gif" alt="WebDeli" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
// 非表示にしたのち、休止をおいて再表示
$('#logo1')
.hide(3000)
.delay(3000)
.show(3000);
// 非表示にしたのち、すぐに再表示
$('#logo2')
.hide(3000)
.show(3000);
});
</script>
</body>
</html>
|
delayメソッドの引数には、他のアニメーションメソッドと同じく、休止の時間をミリ秒単位で指定します。
また、“slow”／“fast”のような文字列キーワードで指定することもできます。この場合、それぞれ600／200ミリ秒だけ休止します。
果たして、結果を確認してみると、<div id="logo2">要素が非表示になった後、即座に再表示されるのに対して、<div id="logo1">要素は非表示になった後、しばらく非表示の状態を経た後、おもむろに再表示することが確認できます。
hide／showメソッドの引数を省略した場合
ちなみに、hide／showメソッドの引数を省略した場合にはどうなるでしょうか。hide／showメソッドはそれぞれ、要素を即座に非表示／表示にします。サンプルの場合は、
<div id="logo2">要素は即座に非表示⇒表示とした結果、画面は何も変化せず、<div id="logo1">要素だけが非表示状態を3000ミリ秒経過した後、再表示する
と思われるかもしれません。しかし、そうはなりません。実際の動作を見てみましょう。
|
$('#logo1')
.hide()
.delay(3000)
.show();
$('#logo2')
.hide()
.show();
|
結果は、「どちらも変化しない」です。delayメソッドが無視され、いずれも非表示⇒再表示を即座に実行するのです。
この問題は、他のアニメーションメソッド（fadeIn、fadeOut、slideUp、slideDown）ではありません。
API：.delay() カテゴリ：Effects（エフェクト） > Custom
※以下では、本稿の前後を合わせて5回分（第62回～第66回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
62. Ajax通信で得られたコンテンツを加工するには？（$.ajax［dataFilter］）
$.ajaxメソッドにより得たコンテンツをdoneメソッドで処理する前に加工／編集できる「$.ajaxメソッドのdataFilterパラメーター」の基本的な使い方を説明する。
63. Ajax通信で成功／失敗コールバックに任意の値を渡すには？（$.ajax［context］）
主にコールバック関数に任意の値を引き渡す目的で使える「$.ajaxメソッドのcontextパラメーター」の基本的な使い方を説明する。
64. 【現在、表示中】≫ アニメーションを一時停止するには？（delay）
実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。
65. イベントリスナーをそのままに、要素を削除するには？（detach）
イベントリスナーを破棄せず維持した状態で要素を削除し、再生成時に元通りにする方法を説明。削除／再生成ではなく、非表示／表示の利用推奨についても言及する。
66. 特定のAjax通信でのみグローバルイベントを無効化するには？（$.ajax［global］）
Ajax通信の開始／終了／成功／失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。
