28

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

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

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

如何使用 jQuery 制作动画？

4

8 回答 8

44

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

$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();
于 2010-01-14T23:07:46.317 回答
11

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

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

于 2008-09-03T18:20:21.080 回答
8

虽然@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
});
于 2008-09-03T21:57:04.973 回答
6

对于纯 jQuery 方法，您可以执行

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

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

于 2008-09-03T18:31:18.433 回答
4 
var $msg = $('#msg-container-id');
$msg.fadeIn(function(){
  setTimeout(function(){
    $msg.fadeOut(function(){
      $msg.remove();
    });
  },5000);
});
于 2008-09-03T18:22:35.893 回答
2

根据 dansays 的评论，以下内容似乎效果很好：

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

于 2008-09-17T07:02:14.287 回答
1

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

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

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

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

于 2010-06-14T19:06:21.573 回答
0

1.6.2 更新

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

这有效：

$('#foo').delay(2000).fadeOut(2000);
于 2011-10-12T04:32:39.667 回答