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

Posted 2023-05-08

【中文标题】在使用 jQuery 淡出元素之前如何暂停？

【英文标题】：How do you pause before fading an element out using jQuery?

【发布时间】：2010-09-07 17:18:23

【问题描述】：

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

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

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

如何使用 jQuery 制作动画？

【问题讨论】：

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

@Simon - 从 1.4 开始，否 - 请参阅下面的答案。

【参考方案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);