如何在使用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

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

Answer 4

對於純jQuery的方法，你可以做

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

這是一個黑客，但它的工作

Answer 5

雖然@約翰·希恩的方法工作，你碰上在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 6

繼續從丹息的評論，以下似乎很好地工作：

$('#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

森龍的回答會導致元件彈出，不服從拖延或fadeOut。

這工作：

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