.delay()

.delay( duration, [ queueName ] ) 官网原E文: jQuery

描述: 设置一个延时来推迟执行队列中之后的项目。

  • version added: 1.4.delay( duration, [ queueName ] )

    duration一个用于设定队列推迟执行的时间,以毫秒为单位的整数。

    queueName一个作为队列名的字符串。默认是动画队列 fx

在jQuery1.4中性增加的,.delay()方法允许我们将队列中的函数延时执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列

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

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

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

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

jQuery.delay() 用来在jQuery动画效果和类似队列中是最好的。但不是替代 JavaScript 原生的 setTimeout 函数,后者更适用于通常情况。

Example:

Animate the hiding and showing of two divs, delaying the first before showing it.

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.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>

Demo:

jQuery 1.6 API 中文版Clove整理、修订