.delay()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.delay()

分类:效果 > 自定义效果

返回: jQuery

.delay( duration [, queueName ] )

描述:设置一个定时器,以延迟执行队列中后续的项目。

加入于: 1.4
.delay( duration [, queueName ] )
  • duration
    类型:Integer
    一个整型数,表示队列中下一个项目推迟执行的毫秒数。
  • queueName
    类型:String
    一个字符串,它包含了队列的名称。默认是fx,即标准效果队列。

.delay()方法在jQuery 1.4版中加入,它允许我们推迟跟着队列后面的函数的执行。它可以用于标准的效果队列,或者用于自定义队列。只有队列中后面的事件可以被推迟;举个例子,这个方法不能推迟没有参数形式的.show()方法和.hide()方未能,因为这两者并不使用效果队列。

持续时间用毫秒数指定;更大的数字表示更慢的动画,而不是更快的动画。提供的字符串'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的隐藏和显示状态,在显示第一个之前延迟它。

<!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>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/delay.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。