延迟JQuery效果

Question

我想在几秒钟后使一个元素及其所有子元素淡出，但我还没有找到一种指定效果应该在延迟一定时间后开始的方法。

- Don

---

你能举个例子，说明一个元素的子元素不会随着该元素一起淡化吗？ - tvanfosson

抱歉，我的错误，我将更新帖子。 - Dónal

Answer 1

setTimeout(function() { $('#foo').fadeOut(); }, 5000);

5000是五秒的毫秒表示。

- swilliams

---

请注意，这里使用的是JavaScript内置的setTimeout函数，与jQuery无关。 - Chris Marasti-Georg

我认为这只是部分回答了他的问题。 - Jason Bunting

Answer 2

我使用了我刚编写的这个暂停插件

$.fn.pause = function(duration) {
    $(this).animate({ dummy: 1 }, duration);
    return this;
};

像这样调用：

$("#mainImage").pause(5000).fadeOut();

注意：您不需要回调函数。

---

编辑：现在，您应该使用jQuery 1.4内置的delay（）方法。 我没有检查过，但我认为它比我的插件更“聪明”。

- Simon

---

只要注意一下，如果jQuery添加了pause()函数，它的效果可能比我的更好！但是像这样抽象化你正在做的事情是很好的。 - Simon_Weaver

有人可以解释一下为什么我不需要回调函数吗？我不太确定为什么这个函数不会立即返回。 - Simon_Weaver

jQuery内置了一个动画队列...如果您从未重置/停止队列，那么“暂停”就像一段不实际执行任何动画的动画期间。 - gnarf

stop() 无法与 delay() 一起使用，因此我仍然使用您的虚拟动画技巧。（bug http://bugs.jquery.com/ticket/6576） - yonran

Answer 3

以前你会像这样做

$('#foo').animate({opacity: 1},1000).fadeOut('slow');

第一个动画没有做任何事情，因为元素已经设置为不透明度 1，但它会暂停指定的时间。

In jQuery 1.4，他们将这个功能集成到框架中，因此您不必像上面那样使用 hack。

$('#foo').delay(1000).fadeOut('slow');

该功能与原始的jQuery.delay()插件相同，http://www.evanbot.com/article/jquery-delay-plugin/4

- Drew

Answer 4

最好的方法是使用jQuery的delay方法：

$('#my_id').delay(2000).fadeOut(2000);

- user263865

Answer 5

您可以通过使用fadeTo()方法并在其中设置5秒的延迟来避免使用setTimeout。

$("#hideAfterFiveSeconds").click(function(){
  $(this).fadeTo(5000,1,function(){
    $(this).fadeOut("slow");
  });
});

- Jonathan Sampson

---

做这种类型的代码块相比于使用setTimeout会占用更多的CPU资源，我不认为这样做有什么优势。- 为什么需要避免使用本地计时器？ - redsquare

Answer 6

我已经编写了一个插件，让您可以在链中添加延迟。

例如：$('#div').fadeOut().delay(5000).fadeIn(); // 淡出元素，等待5秒钟，淡入元素。

它不使用任何动画技巧或过多的回调链接，只是简单、干净、简短的代码。

http://blindsignals.com/index.php/2009/07/jquery-delay/

- chelfers