.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>
演示结果