jQuery显示5秒后隐藏。

Question

我正在使用.show来显示隐藏的消息，它会在表单成功提交之后出现。

如何显示该消息 5 秒钟然后隐藏？

- josoroma

Answer 1

你可以在动画之前使用.delay()，像这样：

$("#myElem").show().delay(5000).fadeOut();

如果不是动画，则直接使用 setTimeout()，示例代码如下：

请注意，保留原文html标签。

$("#myElem").show();
setTimeout(function() { $("#myElem").hide(); }, 5000);

你之所以要这样做是因为.hide() 没有持续时间时通常不会在动画(fx)队列上，它只是一个即时效果。或者，另一个选项是自己使用.delay()和.queue()，像这样：

$("#myElem").show().delay(5000).queue(function(n) {
  $(this).hide(); n();
});

- Nick Craver

---

建议2完美地展示了一个勾选图标，并使用fadeOut()而不是hide()。非常好的答案。 - Kevin Zych

@wilsjd 不行，.delay() 不能与 .hide() 一起使用，元素会被显示然后立即隐藏。请参见 这个 jsFiddle，这就是为什么 Nick 提到了“如果不是动画，请直接使用 setTimeout()，像这样：...”。 - Wesley Smith

嗯，我想知道那两年前是否有效。不过这是个好发现。感谢你让我保持诚实。 - wilsjd

我也实现了这个功能，但当我在5秒内两次显示消息时，它应该隐藏先前的消息并重新显示，但它没有重置第一个延迟。 - alamnaryab

Answer 2

您可以使用以下效果进行动画，您可以根据自己的需求更改值。

$("#myElem").fadeIn('slow').animate({opacity: 1.0}, 1500).effect("pulsate", { times: 2 }, 800).fadeOut('slow'); 

- Rahul

---

$(...).fadeIn(...).animate(...).effect 在 JQuery 2.1.3 中不是一个函数。 - entitycs

@DustinCharles 添加jQueryUI而不仅仅是jQuery。jQuery中没有包含effect()函数，例如https://code.jquery.com/ui/1.12.0/jquery-ui.min.js - Rahul

Answer 3

就像这样简单：

$("#myElem").show("slow").delay(5000).hide("slow");

- Antonio Ooi

Answer 4

在 Laravel 8 中，使用 Ajax 显示保存在会话中的 5 秒错误消息

<div id="error">
    @php
        $error = Session::get('message');
        echo $error;
    @endphp
</div>
<script>
    $("#error").show();
    setTimeout(function() {
        $("#error").hide();
    }, 5000);
</script>

- Muhammad Talha