「jQuery」delayを使って時間差で処理を行うサンプル
書式
$(セレクタ名).delay(3000).queue(function(){
処理コード
});
「.delay」を使って時間差で処理を行います。
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $('#btnChange').click(function(){ //3秒後に背景色を変える $('#show').delay(3000).queue(function(){ $(this).addClass('cft').dequeue(); }); }); }); </script> <style> .cft{ background-color:skyblue; } </style> </head> <body> <div id="show">delayで時間差のサンプル</div> <input type="button" id="btnChange" value="適用"> </body> </html>
実行結果
「適用」ボタンを押すと、div要素「show」の文字部分が3秒後に背景色がskyblueになります。