「jQuery」delayを使って時間差で処理を行うサンプル

2022年3月14日

書式
$(セレクタ名).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になります。

jQuery

Posted by arkgame