title: How to fade a message out after a timeout
body: <p>I have a simple login page that displays a message if the login was not successful. I would like this message to fade out after 5 seconds, but I can't get it to work.</p>
  
  <p>The login part (removed most of the irrelevant stuff):</p>
  
  <pre><code>&lt;h:inputText title="Name" value="#{authBean.name}" id="username" /&gt;
  &lt;h:inputSecret title="Password" value="#{authBean.password}" id="password" /&gt;
  
  &lt;p:commandButton id="loginButton" action="#{authBean.loginAndRedirect}"
            update="@form" value="Login" /&gt;
  &lt;h:message id="messages" for="login:username" /&gt;
  </code></pre>
  
  <p>What I have tried so far:</p>
  
  <p>The command entered in the Firebug command line works perfectly: <code>$('[id$=messages]').fadeOut();</code></p>
  
  <p>Now I need a way to trigger it by a timer:</p>
  
  <p>setting a callback on the button like this does not work (no effect, no error): </p>
  
  <pre><code>&lt;p:commandButton ... oncomplete="setTimeout(5000, '$('[id$=messages]').fadeOut())" ... /&gt;
  </code></pre>
  
  <p>I have tried it with <code>onclick</code> and <code>oncomplete</code> but with no effect and no errors.</p>
  
  <p>Tried using primfaces effects (wrapped JQuery effects) on the <code>message</code> element:</p>
  
  <pre><code>&lt;h:message id="messages" for="login:username" errorClass="errorMessage"&gt;
    &lt;p:effect type="fadeout" event="load" delay="5000"&gt;
      &lt;f:param name="mode" value="'hide'" /&gt;
    &lt;/p:effect&gt;
  &lt;/h:message&gt;
  </code></pre>
  
  <p>no effect, no errors.</p>