點擊或延遲後jQuery淡出

我在網站上顯示一個消息框。我希望能夠在點擊或X秒後淡出。問題是，delay()函數取代了click()函數，即使您單擊關閉，您仍然需要等待時間。點擊或延遲後jQuery淡出

這裏是jQuery的

$(document).ready(function() {  
$(".close-green").click(function() { 
     $("#message-green").fadeOut("slow"); 
    }); 

    //fade out in 5 seconds if not closed 
    $("#message-green").delay(5000).fadeOut("slow"); 

})

我還設置了一個簡單的jsfiddle。看出來延遲線問題評論http://jsfiddle.net/BandonRandon/VRYBk/1/

來源

2011-03-17 BandonRandon

的可能重複[延遲jQuery效果（http://stackoverflow.com/questions/251204/delay-jquery-effects） – swilliams 2011-03-17 22:03:16

@swilliams這甚至還沒有接近同樣的事情。那個人想知道如何延遲動畫，OP已經知道如何，但是想知道如果在延遲完成之前發生事件，如何防止延遲。 – 2011-03-17 22:04:48

你應該將其更改爲setTimeout： http://jsfiddle.net/VRYBk/3/

（在的jsfiddle鏈接）我刪除您的延遲線，並用標準setTimeout等取代它：

setTimeout(function(){ 
    $("#message-green").fadeOut("slow"); 
},5000)

作爲一個說明爲什麼，是因爲JS是從上到下閱讀並單擊，並觸發事件之前，它會讀取你的延遲。因此，即使當您單擊延遲正在運行導致所有動畫暫停。

來源

2011-03-17 21:59:26

已更新我的回答，以解釋爲什麼您遇到此問題 – 2011-03-17 22:01:09

謝謝，我認爲這很簡單。我真的很感謝你解釋爲什麼！ :) – BandonRandon 2011-03-17 22:08:16

這將是jQuery的1.5新Deferred對象的理想用途：在http://jsfiddle.net/Nyg4y/3/

注意不要緊

// a deferred object for later processing 
var def = $.Deferred(); 

// resolve the deferred object on click or timeout 
$(".close-green").click(def.resolve); 
setTimeout(def.resolve, 5000); 

// however the deferred object is resolved, start the fade 
def.done(function() { 
    $(".message-green").fadeOut("slow"); 
});

工作演示，如果你按下按鈕計時器仍火災 - 忽略def.resolve()的第二個電話。

來源

2011-03-17 22:28:53 Alnitak

謝謝，我使用的庫稍微舊一些，但如果我升級到1.5我現在有一些事情要做。 – BandonRandon 2011-03-19 21:04:16

我發現那位是最好的解決方法由奧斯卡龍芯的建議，我莫名其妙地添加到了它：

if (! $clicked.hasClass("search")) 
{ 
    setTimeout(function() 
    { 
     jQuery("#result").delay('1500').fadeOut('2800'); 
    },7000); 
} 
});

他最初的建議是非常有用的：

您應將其更改爲一個的setTimeout：http://jsfiddle.net/VRYBk/3/

（在jsfiddle鏈接中）我刪除了延遲線，並用標準setTimeout替換它：

setTimeout(function(){ 
     $("#message-green").fadeOut("slow"); 
},5000)

奧斯卡龍芯，

來源

2014-09-24 13:37:56

點擊或延遲後jQuery淡出

回答

相關問題