如何在超时后淡出消息答案

【问题标题】：How to fade a message out after a timeout如何在超时后淡出消息
【发布时间】：2013-02-26 12:25:06
【问题描述】：

我有一个简单的登录页面，如果登录不成功，会显示一条消息。我希望这条消息在 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>

没有效果，没有错误。

【问题讨论】：

标签： jquery jsf jakarta-ee jsf-2 primefaces

【解决方案1】：

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

【讨论】：

+1 谢谢，K D。一旦我用单引号替换了 5000 左右的双引号，它就起作用了。
谢谢 :) +1 也感谢您编辑我提供的代码以使其正常工作.. 您能否将其标记为答案
对不起，K D。 bipen 提供了唯一有效的答案，无需更改。

【解决方案2】：

您在setTimeout() 中缺少function 闭包。此外，调用函数比使用内联 JavaScript 更好。它更易于阅读和调试。

例如

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

与

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

【讨论】：