jQuery入門 | エフェクト(effect)効果 | エフェクト効果の制御 .delay() .stop() .finish()

エフェクト効果の制御

jQueryでは、次のメソッドを使用してユーザーが直接エフェクト効果を制御できる。

エフェクト効果の遅延時間設定

.delay()メソッドは、実行中のキュー(Queue)内で連続して実行されるエフェクト効果の間の遅延時間を設定する。

次の例は、フェードアウト効果とフェードイン効果の間に1秒の遅延時間を設定する例である。

次のようなHTML要素があるとき、

<p><button>実行</button></p>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

次のように実行ボタンを押すと、四角形が消えた後、classが"first"である要素は遅延時間なし、“second"である要素は0.5秒、“third"は1秒の遅延時間を置いて再び表示される。

$("button").on("click", function() {
  $("div.first").slideUp(300).fadeIn(400);
  $("div.second").slideUp(300).delay(500).fadeIn(400);
  $("div.third").slideUp(300).delay(1000).fadeIn(400);
});

コードを実行

エフェクト効果の停止

.stop()メソッドは、選択した要素で実行中のすべてのエフェクト効果を一時的に停止する。

次の例は、開始ボタンを押すとサイズが徐々に大きくなり、停止ボタンを押すと一時停止する例である。

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#stop").on("click", function() {
  $("div").stop();
});

コードを実行

エフェクト効果の終了

.finish()メソッドは、選択した要素が含まれるキューも削除して、すべてのエフェクト効果を完全に終了する。

次の例は、開始ボタンを押すとサイズが徐々に大きくなり、終了ボタンを押すと効果が終了する例である。

$("button#start").on("click", function() {
  $("div").animate({width: 300, height: 300}, 3000);
});
$("button#finish").on("click", function() {
  $("div").finish();
});

コードを実行

.delay()と.finish()の違い

.stop()メソッドと.finish()メソッドは、実行中のエフェクト効果を止めるという点では同じである。
違いは、.stop()メソッドは一時停止するのに対し、.finish()メソッドは停止ではなく完全に終了する点である。つまり、.stop()メソッドで停止すると再開できるが、.finish()メソッドでは再開できず、最初からもう一度実行する必要がある。