如何在超時後淡出消息

Question

我有一個簡單的登錄頁面，如果登錄未成功，將顯示一條消息。我希望此消息在5秒後淡出，但我無法使其正常工作。

登錄部分（除去大部分的不相關的東西）：

<h:inputText title="Name" value="#{authBean.name}" id="username" /> 
<h:inputSecret title="Password" value="#{authBean.password}" id="password" /> 

<p:commandButton id="loginButton" action="#{authBean.loginAndRedirect}" 
      update="@form" value="Login" /> 
<h:message id="messages" for="login:username" /> 

我迄今爲止嘗試：

的命令，在Firebug的命令行中輸入完美的作品：$('[id$=messages]').fadeOut();

現在我需要一種方法來觸發它的計時器：

設置按鈕上的回調像這樣不起作用（沒有效果，沒有錯誤）：

<p:commandButton ... oncomplete="setTimeout(5000, '$('[id$=messages]').fadeOut())" ... /> 

我與onclick和oncomplete，但沒有效果，沒有錯誤嘗試。

使用message元件上primfaces效應（纏繞jQuery效果）嘗試：

<h:message id="messages" for="login:username" errorClass="errorMessage"> 
    <p:effect type="fadeout" event="load" delay="5000"> 
    <f:param name="mode" value="'hide'" /> 
    </p:effect> 
</h:message> 

沒有效果，沒有任何錯誤。

Answer 1

你錯過了function封閉setTimeout()。另外，調用函數比使用內聯JavaScript更好。閱讀和調試更容易。

E.g.

<p:commandButton ... oncomplete="fadeoutfunction()" ... /> 

與

function fadeoutfunction(){ 
setTimeout(function(){ 
    $('[id$=messages]').fadeOut(); 
},5000); 
} 

Answer 2

<p:commandButton ... 
oncomplete="setTimeout(function(){$('[id$=messages]').fadeOut()},'5000')" ... />