在 jQuery 中使用 delay() 方法

Sheeraz Gul 2024年2月15日

jQuery jQuery Delay

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 延遲

讓我們在 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 的高度和寬度。見輸出：

jQuery 延遲動畫

作者： Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

jQuery delay() 方法

jQuery `delay()` 方法