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()によるアニメーションに遅延を付けるための方法の結論だけのご紹介になります。