在使用jQuery淡化元素之前，你如何暂停？

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

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

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

你怎么能使用jQuery动画这个？

Answer 1

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

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

Answer 2

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

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

Answer 3

虽然@John Sheehan的方法有效，但是你会遇到IE7中的jQuery fadeIn / fadeOut ClearType小故障 。 就个人而言，我选择@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 }); 

Answer 4

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

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

这是一个黑客，但它完成了这项工作

Answer 5

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

Answer 6

根据dansays的评论，以下似乎工作得很好：

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

Answer 7

1.6.2的更新

Nathan Long的回答将导致元素弹出而不遵守延迟或fadeOut 。

这有效：

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

Answer 8

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

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

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

我不介意页面上是否有隐藏的DIV（不管怎样，不应该有多个DIV）。