延迟 JQuery 效果

Posted 2023-05-08

【中文标题】延迟 JQuery 效果

【英文标题】：delay JQuery effects

【发布时间】：2010-09-20 01:19:08

【问题描述】：

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

【问题讨论】：

你能举个例子，当一个元素的子元素没有被元素淡化吗？

对不起，我的错误，我会更新帖子

【参考方案1】：

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

5000 是以毫秒为单位的五秒。

【讨论】：

请注意，这是使用 javascript 的内置 setTimeout 函数，与 jQuery 无关。

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

【参考方案2】：

我用的是我刚刚写的这个暂停插件

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

这样称呼它：

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

注意：您不需要回调。

---

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

【讨论】：

这对我帮助很大！谢谢:-)

只要注意 jQuery 是否添加了 pause() 函数，因为它可能会比我的更好！但是像这样抽象出你正在做的事情是件好事

有人能解释一下为什么我不需要回调吗？我不太确定为什么这不会立即返回

jQuery 有一个内置的动画队列...如果你从不重置/停止队列，“暂停”充当动画的一段时间，实际上并没有动画任何东西。

stop() 不适用于 delay()，所以我仍然使用您的虚拟动画技巧。 （错误bugs.jquery.com/ticket/6576）

【参考方案3】：

以前你会做这样的事情

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

第一个动画没有做任何事情，因为您已经在元素上设置了 opacity 1，但它会暂停一段时间。

在 jQuery 1.4 中，他们已将其内置到框架中，因此您不必像上面那样使用 hack。

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

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

【参考方案4】：

最好的方法是使用jQuery延迟方法：

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

【参考方案5】：

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

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

【讨论】：

与 setTimeout 相比，执行这种块非常占用 cpu。我没有看到优势。 - 为什么需要避免使用本地计时器？

【参考方案6】：

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

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

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

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