ywork2020.com

Title

アニメーションのキューの合間に待機時間を設ける

目次 (INDEX)

delayとは

ここで説明する delay とは次の語句からなるjQueryのメソッドです。
delay
読み: ディレイ
意味: 遅延、~を遅らせる、~を先延ばしにする

目次に戻る

delayメソッドの概要

このメソッドは、アニメーションの初め、または、アニメーションキューの合間に待機時間を設けます。

アニメーションと言っているので animate() を使ったアニメーション思い浮かべるかもしれませんが、 このページのサンプルで使用しているような slideToggle()toggle() のような、要素をアニメーションさせるメソッドにも有効です。 しかし、アニメーション系のメソッドに スピードの引数を与えていない場合は、要素がアニメーションしていないと解釈される場合もあるので、delay() の効果が得られないこともあります。

これは、アニメーションのキューと同等のものと考えてください。 例えば delay() のキューが実行されているタイミングで stop() を使うと、待機時間がキャンセルされます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).delay(duration [, queueName])
  • duration : 遅延待機の持続時間をミリ秒単位で指定します。
  • queueName : 指定可能なキューの名前があれば、文字値で指定します。

目次に戻る

サンプルコードと実行結果

ここでは、2つの div 要素に slideToggle() を使ってアニメーションをさせます。

slideToggle() を 2回 連続で実行させますが、その間のチェーンに delay() を入れて待機時間を設けます。

2つの div には、それぞれに 200ミリ秒と 800ミリ秒の待機時間を設定していますので、時間差のアニメーションを見ることができるはずです。

サンプルコード: CSS
<style>
	.clsDelay200, .clsDelay800{
		display: inline-block;
		border: thin solid ##lightgray;
		height: 50px;
		width: 100px;
	}
	.clsDelay200{
		background-color: ##lightblue;
	}
	.clsDelay800{
		background-color: ##lightpink;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<button id="idButton">run slideToggle</button>
	<br>
	<div class ="clsDelay200"></div>
	<div class ="clsDelay800"></div>
	<script>...</script>
</body>
  • 06: button id="idButton" (このボタンをクリックすることでクリックイベントにアタッチされた関数を実行します。)
  • 08: div class="clsDelay200" (この要素には delay(200) を設定します。)
  • 09: div class="clsDelay800" (この要素には delay(800) を設定します。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$(".clsDelay200").slideToggle(400).delay(200).slideToggle(400);
		$(".clsDelay800").slideToggle(400).delay(800).slideToggle(400);
	});
</script>
  • 02-05: $("#idButton").click(function(){関数の処理} (idButton の要素にクリックイベントをバインドして関数をアタッチしています。)
  • 03, 04: .delay(200) & .delay(800) (2つの slideToggle() チェーンの間に .delay() を挿入して待機時間を設けています。)
実行結果:

目次に戻る