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

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.

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

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

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