• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • delay()

    设置一个延时来推迟执行队列中后续的项。

    .delay(duration[, queueName ])
    • duration类型: Integer。一个整数,指示的毫秒数,用于设定下个队列推迟执行的时间。
    • queueName类型: String。一个作为队列名的字符串。默认是动画队列fx。标准的效果队列。

    在jQuery1.4中性增加的,.delay()方法允许我们将队列中的函数延时执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列。只有队列中连续的事件会延迟;例如,不带参数的.show()或者.hide()不会延迟,因为他们没有使用效果队列

    延时时间(duration参数)是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串'fast''slow'分别代表200和600毫秒的延时。

    使用标准效果列队,举个例子,我们可以在<div id="foo">.slideUp().fadeIn()动画之间设置800毫秒的延时:

    $('#foo').slideUp(300).delay(800).fadeIn(400);
    

    当这句语句执行的时候,这个元素会以300毫秒的卷起动画,接着暂停800毫秒,最后有400毫秒的淡入动画。

    .delay()是用来在jQuery动画效果和类似队列中是最好的。但是,由于其本身的限制,比如无法取消延时——.delay(),它不是JavaScript的原生 setTimeout函数的替代品,这可能是更适合某些使用情况。

    例子

    隐藏再显示两个div。其中绿色的div在显示之前,有800毫秒的延时。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { position: absolute; width: 60px; height: 60px; float: left; }
    .first { background-color: #3f3; left: 0;}
    .second { background-color: #33f; left: 80px;}
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <p><button>Run</button></p>
    <div class="first"></div>
    <div class="second"></div>
    <script>
        $("button").click(function() {
          $("div.first").slideUp(300).delay(800).fadeIn(400);
          $("div.second").slideUp(300).fadeIn(400);
        });</script>
     
    </body>
    </html>
    

    上篇:animate()

    下篇:finish()