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

我正在使用jQueryfadeOut方法淡入淡出然后删除该元素。我可以增加持续时间以延长使用寿命，但这看起来很奇怪。

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

如何使用jQuery制作动画？

解决方案

回答

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

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

回答

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

回答

对于纯jQuery方法，我们可以执行

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

这是一个hack，但确实可以做到

回答

当@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
});

回答

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

$('＃thing').animate({dummy：1}，2000) .animate({etc ...});

回答

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

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

回答

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

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

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

我不介意页面上是否有隐藏的DIV(反正不应多于几个)。