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弹出消息

回答

相关问题