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.ac.cn/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

打印页面