显示 div 元素一段时间，然后隐藏它。

Question

我在我的网站上使用jQuery进行各种操作，但有一件事情我不确定如何做到，就是让它显示一个元素，然后等待X秒钟，再隐藏该元素。

$('#form').ajaxForm(function() { 
    $('#cartcontents').fadeOut("fast").load('cart.php').fadeIn("fast");
}); 

这是我现在正在使用的JavaScript代码。当表单提交时，如何让它显示

#notice

5秒钟，然后淡出？

- mrpatg

Answer 1

$('#form').submit(function() {
   $('#notice').show();
   setTimeout(function() { 
       $('#notice').fadeOut(); 
   }, 5000);
});

- Jacob Relkin

Answer 2

在onSubmit事件处理程序中，使用$('#divName').show()让

元素出现（我认为这是正确的语法）。然后你可以使用setTimeout("hideDiv()",5000)，接着定义hideDiv()函数，该函数执行$('#divName').fadeOut()来隐藏

元素。

- Aly

Answer 3

由于jQuery现在不太流行了，这里提供一个使用原生JavaScript的简单解决方案。

const notification = document.querySelector("#notification");
const button = document.querySelector("#button");
button.addEventListener("click", ()=>{
  notification.style.display = "block";
  setTimeout(()=>{notification.style.display="none"},5000);
});

<div id="notification" style="display:none;">
    <p>You clicked the button. Wait for 5 seconds now. </p>
</div>

<button id="button">Click Me to Display </button>

您将默认样式设置为none，并在按钮点击时进行更改。

- Sanan Ali