javascript - 延迟 JQuery 效果

Question

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

score 77 · Accepted Answer

77

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

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

于 2008-10-30T18:18:10.963 回答

score 43 · Accepted Answer

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

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

像这样称呼它：

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

注意：您不需要回调。

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

score 19 · Accepted Answer

以前你会做这样的事情

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

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

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

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

score 11 · Accepted Answer

11

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

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

于 2010-04-15T18:02:26.100 回答

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

6 回答 6