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

【问题标题】：How do you pause before fading an element out using jQuery?在使用 jQuery 淡出元素之前如何暂停？
【发布时间】：2010-09-07 17:18:23
【问题描述】：

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

我正在使用 jQuery fadeOut 方法淡化然后移除元素。我可以增加持续时间以使其持续更长时间，但这看起来很奇怪。

我希望元素显示五秒钟，然后快速淡出，最后被移除。

如何使用 jQuery 制作动画？

【问题讨论】：

jQuery 1.3.1 或更高版本是否仍需要“hacks”？这个问题已经几个月了，所以希望现在有更好的方法吗？
@Simon - 从 1.4 开始，否 - 请参阅下面的答案。

标签： javascript jquery animation

【解决方案1】：

jQuery 1.4 中的新 delay() 函数应该可以解决问题。

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

【讨论】：

【解决方案2】：

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

$elem 是您希望隐藏的元素，5000 是延迟（以毫秒为单位）。您实际上可以在对setTimeout() 的调用中使用任何函数，为简单起见，该代码仅定义了一个小的匿名函数。

【讨论】：

【解决方案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 plug-in 可以满足您的需要：

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

【讨论】：

【解决方案4】：

对于纯 jQuery 方法，您可以这样做

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

这是一个 hack，但它确实有效

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

根据 dansays 的评论，以下内容似乎运行良好：

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

【讨论】：

【解决方案7】：

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

以下是可行的（通过省略remove() 方法）：

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

我不介意页面上是否有隐藏的 DIV（反正应该不会超过几个）。

【讨论】：

【解决方案8】：

1.6.2 更新

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

这行得通：

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

【讨论】：