javascript - jQuery 在 x 毫秒后隐藏通知

Question

我在这里找到了警告消息脚本:http://www.red-team-design.com/cool-notification-messages-with-css3-jquery

在脚本中设置点击函数后隐藏警告信息

     $('.message').click(function(){              
              $(this).animate({top: -$(this).outerHeight()}, 500);
     });  

所以我添加了超时功能，希望在 x 毫秒后关闭它，但是“计时器”可以说是在页面加载后立即开始运行。

    setTimeout(function(){hideAllMessages()},5000);  

我希望每次提交表单时超时功能都起作用并且删除消息变得可见(我正在使用隐藏的 iframe 提交表单并且它用于库存，因此重复提交将在同一页面上完成) .

我设置了一个 Demo Here jsfiddle

Answer 1

您想将它添加到您的 showMessage 函数中，如下所示:

function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          setTimeout(hideAllMessages,3000);     
    });
}

jsFiddle Demo

编辑: 正如 James Montagne 在评论中所建议的，您可以使用 clearTimeout()以防止用户快速点击时库存超时。

像这样的东西(简单的例子，可能还没有准备好生产):

var timeout = null;
function showMessage(type)
{
    $('.'+ type +'-trigger').click(function(){
          hideAllMessages();                  
          $('.'+type).animate({top:"0"}, 500);
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(hideAllMessages,3000);     
    });
}

jsFiddle Demo