.delay()
返回: jQuery
.delay( duration [, queueName ] )
描述:设置一个定时器,以延迟执行队列中后续的项目。
加入于: 1.4
.delay( duration [, queueName ] )该.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>
演示结果