.delay()

类别：效果 > 自定义

.delay( duration [, queueName ] )返回类型：jQuery

描述：设置一个定时，来延迟队列中后续项目的执行。

  • 增补版本：1.4.delay( duration [, queueName ] )

    • duration
      类型：Integer
      一个整型数，指示队列中下一项要延迟执行的毫秒数目。
    • queueName
      类型：String
      一个字符串，包含了列表的名列。默认为fx，是标准效果队列。

在jQuery 1.4中加入，.delay()方法允许我们延迟执行队列中跟在它后面的函数。它可以用于标准效果队列，也可以用于自定义队列。Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

持续时间用毫秒给出；更高的值指示更慢的动画，而不是更快的动画。字符串'fast'和'slow'可以分别指示200毫秒和600毫秒的持续时间。

例如，我们可以使用标准效果队列，在<div id="foo">的.slideUp()和.fadeIn()之间设置800毫秒的延迟：

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

在执行此语句时，元素向上滑动300毫秒，然后暂停800毫秒，然后褪色400毫秒。

.delay()方法最好用在队列的jQuery效果之间。因为它有局限性——例如，它不能提供一个方式来取消延迟——.delay()并不是JavaScript原生的setTimeout函数的替代方式，后者可能适合于特定的使用情形。

示例：

变动两个div的隐藏和显示，在显示第一个之前先延迟它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delay demo</title>
  <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://code.jquery.com/jquery-1.10.2.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>

演示：