點擊或延遲后的jQuery Fadeout

Question

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

這是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/

Answer 1

你應該把它改成setTimeout ： http ： //jsfiddle.net/VRYBk/3/

（在jsfiddle鏈接中）我刪除了你的延遲線，並將其替換為標准的setTimeout如：

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

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

Answer 2

這將是jQuery 1.5的新Deferred對象的理想用法：

// 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");
});

http://jsfiddle.net/Nyg4y/3/的工作演示

請注意，如果按下按鈕，計時器仍會觸發，則無關緊要 - 忽略對def.resolve()的第二次調用。

Answer 3

我認為它是Oscar Godson建議的最好的解決方法，我不知怎的把它添加到它：

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)

奧斯卡龍頓，