如何使用 jQuery 在一段时间间隔后隐藏 DIV 元素

自动隐藏 HTML 元素可用于多种用途。状态消息部分是 HTML 中应用自动隐藏功能最有效的区域。每当提交表单或完成任务时，状态消息都会显示在网页上。几秒钟后自动从元素中隐藏消息 DIV 将是一个好主意。

在本教程中，我们将向您展示如何使用 jQuery 在一段时间间隔后隐藏 DIV 元素。不仅是 DIV 元素，您还可以在 jQuery 中几秒钟后自动隐藏任何 HTML 元素。

以下代码片段展示了如何使用 jQuery 在 5 秒后隐藏消息。

HTML 元素：
DIValert元素以 HTML 形式保存状态消息。

<div class="alert">
The requested operation is completed successfully!
</div>

jQuery 库：
首先，包含 jQuery 库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

JavaScript 代码：

使用fadeTo()with 方法使用 jQuery 在 5 秒后slideUp()隐藏.alertHTML 元素中的消息块 ( )。

<script>
$(document).ready(function() {
$(".alert").fadeTo(5000, 500).slideUp(500, function(){
$(".alert").slideUp(500);
});
});
</script>

您可以根据需要在fadeTo()duration方法的参数中设置自动隐藏时间。

.fadeTo(duration, opacity)