如何为jQuery函数添加延迟

Question

我已阅读过文档，并且知道.delay()是向函数添加延迟的最简单方法。

http://api.jquery.com/delay/

我想在两次替换元素的HTML之间创建一个10秒的延迟：

 $('.access-details').html('text-1').delay(10000).html('text2');

然而，这会毫不拖延地立即跳到text-2。我做错了什么？

JS小提琴：http://jsfiddle.net/8PpnB/

Answer 1

您需要将其排队等待延迟工作

$('.access-details').html('text-1').delay(10000).queue(function () {
    $(this).html('text2')
});

演示：Fiddle

---

或者使用普通的旧setTimeout（）

$('.access-details').html('text-1');
setTimeout(function () {
    $('.access-details').html('text-2')
}, 2500)

演示：Fiddle

Answer 2

.delay（）方法最适合延迟排队的jQuery效果。

它无法应用于.html()方法。

如果您想使用.delay()，那么您可以执行以下操作：

$('.access-details').show(0, function() {
  $(this).html('text1')
}).delay(10000).show(0, function() {
  $(this).html('text2')
});

的 Check the demo. 的

否则你必须使用JavaScript的原生setTimeout函数。

Answer 3

或者：

 $('.access-details').html('text-1').hide().show(1000,function() {
   $(this).html('text2');
 });