jQuery - 效果(二)之 延迟

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 180,208评论 25 708
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,746评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,311评论 5 13
  • 通过重写算数类的元方法,可以自定义该类的计算方式
    灰气球阅读 202评论 0 0
  • 《我期待》 我期待有一天你会变得更好 过了今天依旧还是你的陪伴 我看见了你眼角湿红的眼圈 不知道如何给你更好的安慰...
    葉威阅读 216评论 0 3

友情链接更多精彩内容