【jQuery】addClass()・removeClass()を遅延させる方法

RELEASE / 2022.7.7 UPDATE / 2023.11.18

addClass()

delay()

JavaScript

jQuery

queue()

removeClass()

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

jQueryの記述で処理を遅延させるための命令のdelay()。
以下のように記述をすると遅延させて処理を実行することが出来ます。

$(".selecter").delay(1000).fadeIn(1000);

このdelay()ですが、fadeIn()やanimate()など指定できるものは限られます。
addClass()やremoveClass()に対してdelay()を指定しても上手く遅延しません。
しかし、記述方法次第で遅延させることは可能です。

この記事ではaddClass()に遅延効果を設定する記述方法を解説します。

この記事の目次を表示

addClass()やremoveClass()を遅延（delay()）させる記述方法

$(".selecter").delay(1000).addClass("active");

addClass()やremoveClass()に対して遅延させる記述方法は以下の通りです。

$(".selecter").delay(1000).queue(function(){
    $(this).addClass("active");
});

このようにqueue()メソッドを使用することでaddClass()やremoveClass()を遅延させることが可能です。

jqueryを使用していると使用頻度の高いaddClass()やremoveClass()。うまく遅延を駆使してお洒落なアニメーションを実装してみてはいかがでしょうか。