JQuery彈出消息

我試圖做一個自定義彈出消息，出現，顯示給用戶5秒，然後淡出。這工作正常，但如果使用觸發事件多次，超時已經運行消息迅速消失。JQuery彈出消息

到目前爲止我的功能...

function showMessage(message) { 
    $(".messageText").text(message); 

    $(".message").fadeIn("slow");  

    closeBox = function(){ 
     $(".message").fadeOut("slow");  
    } 

    clearInterval(closeBox); 
    setInterval(closeBox, 5000); 
}

非常感謝

來源

2013-01-04 Shaun Hogg

你可以包含你調用showMessage的代碼嗎？ –

您可以添加一個變量來保存消息框的狀態。如果該框顯示，請不要執行該功能。 – Raptor

如何在fadeout函數本身中指定超時？它會爲你工作嗎？ –

試試這個：

var interval; 

function showMessage(message) { 
    $(".messageText").text(message); 

    $(".message").fadeIn("slow"); 
    if(interval){ // If a interval is set. 
     clearInterval(interval); 
    } 
    interval = setInterval(closeBox, 5000); 
} 

function closeBox(){ 
    $(".message").fadeOut("slow");  
}

您需要分配的setInterval給一個變量的迴歸。該句柄可用於結束clearinterval的時間間隔。（您無法通過功能清除的時間間隔，只有間隔手柄）

而且，我把closeBox功能出showMessage功能，這是沒有必要每次showMessage被調用時聲明瞭。

來源

2013-01-04 10:16:40 Cerbrus

inverval應該是間隔.. :) – bipen

@bipen：哎呀，編輯。 – Cerbrus

jQuery的延遲（）適用於像這樣的場景。 –

如何使用jQuery延遲？

樣品：

$("#container").fadeIn().delay(amoutOfTimeInMiliseconds).fadeOut();

您的功能：

function showMessage(message) { 
    $(".messageText").text(message); 

    $(".message").fadeIn("slow").delay(5000).fadeOut("slow");  
}

它應該工作...關心。

來源

2013-01-04 10:17:35

+1使用jQuery的方式來解決問題 – Alex

JQuery彈出消息

回答

相關問題