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

StackOverflow https://stackoverflow.com/questions/42254

  •  09-06-2019
  •  | 
  •  

题

我想在我的页面上闪烁一条成功消息。

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

我想要发生的是让元素显示五秒钟，然后快速消失，最后被删除。

如何使用 jQuery 为其添加动画效果？

有帮助吗？

解决方案

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

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

其他提示

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

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

虽然 @John Sheehan 的方法有效，但你会遇到 jQuery 淡入/淡出 ClearType 故障 在IE7中。就我个人而言，我会选择@John Millikin's 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
});

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

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

这是一个 hack，但它可以完成工作

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

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

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

1.6.2 更新

内森·朗（Nathan Long）的回答将导致该元素弹出而不遵守延迟或 fadeOut.

这有效：

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

丹赛斯的答案对我来说不起作用。因为某些原因， remove() 立即运行并且 div 在任何动画发生之前消失。

然而，以下工作（通过省略 remove() 方法）：

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top