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

這個動畫是隱藏信息。隱藏郵件後，這基本上隱藏了郵件。超時需要在顯示消息的代碼中，而不是隱藏它。 –

回答

相關問題