HOWTO · jQuery
在 jQuery 中使用 delay() 方法
本教程演示瞭如何使用 delay() 方法來延遲 jQuery 中特定專案的執行。
jQuery 的 delay() 方法為執行下一項設定了一個計時器。本教程演示瞭如何在 jQuery 中使用 delay() 方法。
jQuery delay() 方法
delay() 是 jQuery 中的一個內建函式，用於延遲特定專案的執行。此方法是在排隊的 jQuery 效果之間提供延遲的最佳選擇。
此方法的語法是：
$(selector).delay(parameter1, parameter2);
其中，
selector可以是 id、類或元素名稱。parameter1是延遲的速度，可以是毫秒，慢或快。parameter2可選地用於指定佇列名稱；預設值為fx，這是標準效果佇列。
讓我們嘗試一些例子來展示 jQuery 中 delay() 方法的效果：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box1").delay("slow").fadeIn();
$("#box2").delay("fast").fadeIn();
$("#box3").delay(1000).fadeIn();
$("#box4").delay(2000).fadeIn();
$("#box5").delay(3000).fadeIn();
$("#box6").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<h1>jQuery delay() method.</h1>
<p>Click the button to show the delay effect. Color boxes will fade in on the click with a delay</p>
<button>Click Here</button>
<br><br>
<div id="box1" style="width : 50px; height : 50px; display : none; background-color : pink;"> slow </div> <br>
<div id="box2" style="width : 50px; height : 50px; display : none; background-color : green;"> fast </div> <br>
<div id="box3" style="width : 50px; height : 50px; display : none; background-color : blue;"> 1 second </div> <br>
<div id="box4" style="width : 50px; height : 50px; display : none; background-color : violet;"> 2 seconds </div> <br>
<div id="box5" style="width : 50px; height : 50px; display : none; background-color : yellow;"> 3 seconds </div> <br>
<div id="box6" style="width : 50px; height : 50px; display : none; background-color : purple;"> 4 seconds </div> <br>
</body>
</html>
在上面的程式碼中，顏色框將以給定的延遲淡入。見輸出：
讓我們在 jQuery 中嘗試另一個示例，它將基於 delay() 方法為 div 設定動畫。請參閱示例：
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#DemoButton").click(function() {
$("#DemoDiv").delay("fast").animate({
width: "250px",
padding: "35px"
});
$("#DemoDiv").delay("slow").animate({
width: "350px",
padding: "55px"
});
$("#DemoDiv").delay(1000).animate({
width: "275px",
padding: "50px"
});
$("#DemoDiv").delay(2000).animate({
width: "500px",
padding: "60px"
});
$("#DemoDiv").delay(3000).animate({
width: "200px",
padding: "40px"
});
});
});
</script>
<style>
#DemoDiv {
background-color : lightblue;
width : 200px;
height : 100px;
font-size : 30px;
padding : 10px;
display : block;
}
</style>
</head>
<body>
<div id="DemoDiv">Hello, This is Delftstack.com</div>
<button id="DemoButton">Click Here</button>
</body>
</html>
上面的程式碼將根據給定的時間延遲改變 div 的高度和寬度。見輸出：
