jQueryのaddClassのタイミングを遅らせる方法

jQueryのaddClassのタイミングを遅らせる方法

jQueryを使用して、addClassやremoveClassによるクラスの付け外しによってスタイルを変更するテクニックはよく使うと思います。場合によってはそれらのタイミングを遅らせたいということもあります。

まずはこちらをご覧ください。ボタンを押すと3秒後に色が変化しています。このようにaddClassやremoveClassのタイミングを遅らせる方法をお伝え致します。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

目次

よくある失敗例

jQueryをご覧ください。このように単純にdelay()をつけて、その後にaddClass()を書くだけだと思った通りの挙動にはなりません。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

delayはfadeやslideの場合はうまく機能してくれるのですが、addClassではそうはいきません。

上手くいくケース
$(".title").delay(3000).fadeOut();
$(".title").delay(3000).slideUp();

パターン1:queue()を使用する

はじめにqueue(キュー)について、軽く説明しておきます。jQueryではアニメーションを配列で記憶しており、その配列をqueue(キュー)と言います。詳しい内容は割愛致しますが、queue()メソッドを使用することでaddClass()を遅れさせることが可能になります。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

jQuery

$(function () {
  $(".button").click(function () {
    $(".title").delay(3000).queue(function () {
      $(this).addClass("is-red").dequeue();
    });
  });
});

jQueryをこのように記述することでaddClass()のタイミングを遅らせています。ポイントが一つございまして

$(this).addClass("is-red").dequeue();

こちらのdequeue()になります。queue(キュー)にアニメーション以外の処理が入る今回のような場合は、次の処理に移すためにこのように記載します。

パターン2:setTimeout()を使用する

こちらはJavaScriptのsetTimeout()メソッドを使用する方法になります。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

jQuery

$(function () {
  $(".button").click(function () {
    setTimeout(function () {
      $('.title').addClass('is-red');
    }, 3000);
  });
});

私の場合ですとこちらを使うことが多い気がします。どちらの方法も試してみてご自分のしっくりくる方をお選びになれば良いと思います。

参考

http://www.jquerystudy.info/tutorial/03/08.html#

https://jquerystudy.info/reference/effects/queue.html

https://webmanab-html.com/tip/javascript-settimeout-jquery-queue/

まとめ

私の知る限りではこの2パターンを覚えておけば、ある程度は対応できるのかなといった印象です。他にも良い方法がございましたら是非とも教えていただきたいです。以上キクチウェブのキクチでした。ではでは。

仕事のご依頼や当サイトについての質問などは下記のお問い合わせフォームからご連絡ください。

場合によっては回答にお時間をいただくことがあります。ご了承ください。

    This site is protected by reCAPTCHA and the GooglePrivacy Policy and Terms of Service apply.

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!
    目次