「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>
<!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>
<!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になります。