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

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故障 。 就個人而言，我選擇了@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

dansays的答案對我不起作用。 出於某種原因， remove()立即運行，div在任何動畫發生之前消失。

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

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

我不介意頁面上是否有隱藏的DIV（不管怎樣，不應該有多個DIV）。

Answer 8

1.6.2的更新

Nathan Long的回答將導致元素彈出而不遵守延遲或fadeOut 。

這有效：

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