X毫秒

我发现这个脚本警告信息这里经过的jQuery隐藏通知：http://www.red-team-design.com/cool-notification-messages-with-css3-jquery X毫秒

在它被设置为隐藏点击功能

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

后的警告信息的脚本，使我增加了超时功能希望在x毫秒之后关闭它，但是一旦页面加载，'计时器'就可以开始运行。

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

我想超时功能到每一个表单提交时间和下降消息变得可见工作（我使用的是隐藏的iframe提交表单，它是股票，如此反复的提交将在完成相同的页面）。

我成立了一个Demo Here的jsfiddle

来源

2012-06-05 cantaffordretail

你的计时器移到.animate完整回调的内部。 –

你想将其添加到您的showMessage功能是这样的：

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

jsFiddle Demo

编辑：正如意见提出由詹姆斯·蒙塔涅，您可以使用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

来源

2012-06-05 19:17:28 kapa

此外，您可能想要存储超时ID并在此处使用'clearTimeout'。如果您在超时触发前再次点击，您将看到邮件隐藏太快。 –

@JamesMontagne是的，给我的答案增加了一个简单的例子。 – kapa

非常感谢！我是jquery的新手，至少在2个小时内我被困住了！该解决方案有意义的将超时放在show message函数中。并感谢您也加入了clearTimeout，但我绝对不会这样做！ – cantaffordretail

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

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

来源

2012-06-05 19:17:05 Pethical

这个动画是隐藏信息。隐藏邮件后，这基本上隐藏了邮件。超时需要在显示消息的代码中，而不是隐藏它。 –

回答

相关问题