美文网首页
jQuery - 效果(二)之 延迟

jQuery - 效果(二)之 延迟

作者: AshengTan | 来源:发表于2016-08-08 22:30 被阅读11次

    延迟,即让事件延迟一段时间再执行。延迟与动画一起使用,可以创造出更好的视觉效果。

    delay(speed, queueName)

    使事件延迟一段时间再执行。

    参数 类型 描述
    speed String/Number 可选。延迟时间,预设值为 "slow"(600)、"fast"(200),也可自定义延迟时间,单位为毫秒(如:1000)。
    queueName String 可选。效果队列的名称,默认是 "fx"。

    代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>效果_延迟</title>
        <script src="js/jquery-1.8.3.js"></script>
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: orangered;
                margin-top: 20px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <button id="btn1">delay()</button>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("#div3").delay(1000).animate({width: "600px"}, "slow");
                $("#div2").delay("slow").animate({width: "600px"}, "slow");
                $("#div1").delay("fast").animate({width: "600px"}, "slow");
            });
        });
    </script>
    </body>
    </html>
    

    效果演示:

    延迟.gif

    相关文章

      网友评论

          本文标题:jQuery - 效果(二)之 延迟

          本文链接:https://www.haomeiwen.com/subject/trirsttx.html