jQuery緩慢淡入淡出元素間隔和淡入回來，如果用戶懸停

我使用jQuery向用戶顯示一些通知，將使用jQuery append方法出現在屏幕上。一旦它們出現在屏幕上，我想等待5秒鐘，然後在將它從DOM中刪除之前慢慢開始淡出元素。它應該在5秒後纔開始褪色，並且不會立即開始消失。如果用戶懸停該元素，則應該將該元素淡入，然後當用戶移除懸停時，它應該再次開始淡出。jQuery緩慢淡入淡出元素間隔和淡入回來，如果用戶懸停

我有這個至今：

 setTimeout(function() 
      { 
       $(".Notification").fadeOut("slow", function() 
       { 
        $(this).remove(); 
       }); 

      }, 5000);

所以這個淡出元素超時後，但我要如何使它所以當用戶將鼠標懸停的元素它消失早在當用戶刪除懸停。它會再次開始消失（注意：我們不需要再等待了，只要每次將鼠標懸停在元素上時都會將其褪色，除非它到達淡出的末尾並被刪除）

任何人都可以幫忙嗎？我認爲這只是一個簡單的例子，用一些額外的代碼封裝fadeOut部分，但我很掙扎，並希望得到一些幫助。

此外，他們可能會出現在頁面上的多個通知，所以他們都需要根據自己的外觀在屏幕上淡出，而不是同時淡出所有通知。

實際上，這是模仿使用Microsoft Outlook時屏幕右下角顯示的新郵箱。

謝謝

來源

2011-09-23 Cameron

其實，你不需要setTimeout。 jQuery獲得了動畫的.delay（）函數。

/* Initial delay and fading out for 5s */ 
$(".Notification").delay(5000).fadeOut(5000); 

/* If hover, stop the ongoing (or delayed) fadeout, and fadein fast */ 
$(".Notification").mouseenter(function(){ 

    $(this).stop(true, false).fadeIn(500); 
}); 

/* If mouseout, set the element to fadeout slowly after 5s */ 
$(".Notification").mouseleave(function(){ 

    $(this).delay(5000).fadeOut(5000); 
});

我沒有嘗試這樣做實際的例子，但這樣的事情應該這樣做。

來源

2011-09-23 10:08:29

當我鼠標懸停它不會褪色元素回來？ – Cameron

如果您需要在整個淡出後進行懸停時再次顯示它。你需要動畫不透明，而不是使用.fadeOut（），如'.animate（{opacity：0}，5000）'和'.animate（{opacity：1}，5000）' –

不，我不需要要做到這一點，因爲它將在DOM淡出後從DOM中刪除！但是當我徘徊它不會停止通知從淡出...怎麼回事？歡呼 – Cameron

將您的setTimeout賦值給一個變量。當用戶將鼠標懸停在該變量上時，請調用clearTimeout。

來源

2011-09-23 09:50:41

嗨，我不想清除超時，因爲** **只用於延遲最初的淡入淡出。我想要做的就是在用戶懸停元素時停止淡出，然後當他們移除開始淡出時再停止。 – Cameron

所以你可以在他們懸停時再次設置超時時間，不是嗎？ –

jQuery緩慢淡入淡出元素間隔和淡入回來，如果用戶懸停

回答

相關問題