addClass()をdelay()で遅延させる方法【jQuery】

jQueryでアニメーションを作るときに、addClass()やremoveClass()メソッドを使ったClassの追加削除で動かすことがありますよね。

しかし、addClass()だとdelay()メソッドによる遅延(時間の調整)ができずに困ったことはありませんか？

そうです、素直にメソッドチェーンでdelay()を挟んでも効かないのです。

これらを解決して時間遅延させる方法をご説明します。

queue()メソッドを使って遅延させる

結論はqueue()メソッドを使うことです。

うまくいかないソースコード

$('.object').delay(1000).addClass('move');

こんなふうに書くと1秒遅らせてClassの追加ができるんじゃないかと思いますが、できません。

遅延できるソースコード

$('.object').delay(1000).queue(function(){
    $(this).addClass('move');
})

このように書くと思った通りに1秒遅らせてClassを追加させることができます。

補足説明

この記事では queue()メソッド に関する詳しい説明はございません。今回の queue() の使い方はあくまで1つの使い方になります。

単純にaddClass()によるアニメーションに遅延を付けるための方法の結論だけのご紹介になります。