Question

我想在我的页面上闪现成功消息。

我使用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 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
});

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

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

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

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

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

Answer 8

1.6.2的更新

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

这有效：

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

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

8 个答案: