jQuery delay() 方法

jQuery 的delay()方法用於延遲為所選元素執行佇列中下一個函式。它通常與其他 jQuery 效果一起使用來建立定時動畫。

語法

以下是 jQuery delay() 方法的語法：

$(selector).delay(speed,queueName)

引數

以下是上述語法的描述：

speed: 指定在執行佇列中的下一個函式之前延遲的毫秒數。
queueName (可選): 指定佇列的名稱。如果省略，則預設佇列為“fx”。

示例

在下面的示例中，我們使用 jQuery delay() 方法以及 fadeIn() 方法，在單擊按鈕時按順序顯示五個隱藏的 div 元素，並設定不同的延遲：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#fadeButton").click(function(){
                $("#div1").delay(500).fadeIn();
                $("#div2").delay(2000).fadeIn();
                $("#div3").delay(3500).fadeIn();
                $("#div4").delay(4500).fadeIn();
                $("#div5").delay(6500).fadeIn();
            });
        });
    </script>
    <style>
        .hiddenDiv {
            display: none;
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button id="fadeButton">Fade In Divs</button>
    
    <div id="div1" class="hiddenDiv"></div>
    <div id="div2" class="hiddenDiv"></div>
    <div id="div3" class="hiddenDiv"></div>
    <div id="div4" class="hiddenDiv"></div>
    <div id="div5" class="hiddenDiv"></div>
</body>
</html>

單擊按鈕後，每個隱藏的 div 元素都會按順序淡入，延遲時間分別為：500毫秒、2000毫秒、3500毫秒、4500毫秒和6500毫秒。

jquery_ref_effects.htm

列印頁面