使用jQuery如何在淡出元素之前暂停？

Question

我想在我的页面上显示一个成功消息。

我正在使用jQuery的fadeOut方法来淡出并删除该元素。我可以增加持续时间使其持续更长时间，但这看起来很奇怪。

我希望发生的是，该元素显示五秒钟，然后快速淡出，并最终被删除。

如何使用jQuery对此进行动画处理？

- Bjørn

---

使用 jQuery 1.3.1 或更高版本是否仍需要“hack”？由于这个问题已经几个月了，所以希望现在有更好的方法？ - Simon_Weaver

@Simon - 截至1.4版本，不行 - 请参见我下面的回答。 - Nathan Long

Answer 1

jQuery 1.4中的新delay()函数应该可以实现此效果。

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();

- Nathan Long

Answer 2

使用setTimeout(function(){$elem.hide();}, 5000);

其中$elem表示您想要隐藏的元素，5000表示以毫秒为单位的延迟时间。实际上，您可以在setTimeout()调用中使用任何函数，上述代码只是定义了一个小的匿名函数。

- John Millikin

Answer 3

虽然 @John Sheehan 的方法可行，但在 IE7 中会遇到 jQuery fadeIn/fadeOut ClearType glitch 问题。个人而言，我更倾向于 @John Millikin 的 setTimeout() 方法，但如果你坚持使用纯 jQuery 方法，则最好在非透明度属性上触发动画，例如边距。

var left = parseInt($('#element').css('marginLeft'));
$('#element')
    .animate({ marginLeft: left ? left : 0 }, 5000)
    .fadeOut('fast');

如果您知道您的边距是一个固定值，那么您可以使代码更加简洁：

$('#element')
    .animate({ marginLeft: 0 }, 5000)
    .fadeOut('fast');

编辑：看起来jQuery FxQueues插件正好满足您的需求：

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});

- dansays

Answer 4

如果你想使用纯jQuery方法，可以这样做：

$("#element").animate({opacity: 1.0}, 5000).fadeOut();

这是一种hack方法，但它可以完成工作。

- John Sheehan

Answer 5

var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});

- Ricky

Answer 6

继dansays的评论之后，以下内容似乎完美地起作用：

$('#thing') .animate({dummy:1}, 2000) .animate({ etc ... });

- RET

Answer 7

dansays的答案对我不起作用。由于某种原因，remove()立即运行，而在任何动画发生之前，div就消失了。

然而，以下方法可以正常工作（省略remove()方法）：

$('#foo').fadeIn(500).delay(5000).fadeOut(500);

页面上有隐藏的DIV我并不介意（总共也不应该超过几个）。

- thekingoftruth

Answer 8

1.6.2 更新

Nathan Long 的答案会导致元素在不遵守延迟或 fadeOut 的情况下弹出。

这个可以解决：

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

- rjmoggach