jQuery逆引きリファレンス

jQuery逆引きリファレンス

アニメーションを一時停止するには?(delay)

2017年2月9日

実行中のアニメーションを途中で一時停止するdelayメソッドの基本的な使い方を説明。delayメソッド特有の問題点も取り上げる。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:あらかじめ用意されたアニメーションを実行するには?」でも触れたように、jQueryでは汎用的なanimateをはじめ、目的特化したhideslideUpなど、さまざまなアニメーションメソッドが用意されています。これらは単体で利用することもできますし、メソッドチェーンで連結することで、複数のアニメーションを順に実行することも可能です。

 そして、実行中のアニメーションを途中で一時停止する(=以降のアニメーションを一時待機させる)のがdelayメソッドの役割です。

 さっそく、具体的な例も見てみましょう。以下のコードと実行結果は、並んだ2つの画像をそれぞれ以下のようにアニメーションさせる例です。

  • 非表示(3秒)⇒休止(3秒)⇒表示(3秒)
  • 非表示(3秒)⇒表示(3秒)

 以下が、そのコードと実行例です。

HTML
<!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.html)
<div id=“logo2”>要素が先に再表示を完了する
<div id="logo2">要素が先に再表示を完了する

 delayメソッドの引数には、他のアニメーションメソッドと同じく、休止の時間をミリ秒単位で指定します。

 また、“slow”/“fast”のような文字列キーワードで指定することもできます。この場合、それぞれ600/200ミリ秒だけ休止します。

 果たして、結果を確認してみると、<div id="logo2">要素が非表示になった後、即座に再表示されるのに対して、<div id="logo1">要素は非表示になった後、しばらく非表示の状態を経た後、おもむろに再表示することが確認できます。

hide/showメソッドの引数を省略した場合

 ちなみに、hideshowメソッドの引数を省略した場合にはどうなるでしょうか。hideshowメソッドはそれぞれ、要素を即座に非表示/表示にします。サンプルの場合は、

  • <div id="logo2">要素は即座に非表示⇒表示とした結果、画面は何も変化せず、
  • <div id="logo1">要素だけが非表示状態を3000ミリ秒経過した後、再表示する

と思われるかもしれません。しかし、そうはなりません。実際の動作を見てみましょう。

JavaScript
$('#logo1')
  .hide()
  .delay(3000)
  .show();

$('#logo2')
  .hide()
  .show();
hide/showメソッドの引数を省略したコード
どちらも変化しない
どちらも変化しない

 結果は、「どちらも変化しない」です。delayメソッドが無視され、いずれも非表示⇒再表示を即座に実行するのです。

 この問題は、他のアニメーションメソッド(fadeInfadeOutslideUpslideDown)ではありません。

処理対象:一時停止 カテゴリ:エフェクト
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通信の開始/終了/成功/失敗のタイミングで任意の処理を差し挟む際に利用するグローバルイベントを、現在の通信だけ対象外にする方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社