1

我在这里找到了警告消息的脚本：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 提交表单并且它是用于库存的，因此重复提交将在同一页面上完成）。

我在这里设置了一个演示 jsfiddle

4

2 回答 2

3

你想像这样将它添加到你的showMessage函数中：

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

jsFiddle 演示

编辑：正如 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 演示

于 2012-06-05T19:17:28.547 回答
0

尝试在动画完成后设置超时！

 $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500, function(){
               setTimeout(function(){hideAllMessages()},5000);  
          });
 });
于 2012-06-05T19:17:05.203 回答