📌  相关文章
📜  jquery 在 5 秒后显示和隐藏 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:48.656000             🧑  作者: Mango

使用 jQuery 在 5 秒后显示和隐藏

在开发过程中，我们经常需要使用 JavaScript 来展示或隐藏页面元素。jQuery 是一种流行的 JavaScript 库，它使得开发者可以更加便捷地操作 DOM 元素和处理事件。

下面是一个示例，介绍如何使用 jQuery 在 5 秒后显示和隐藏页面元素：

HTML 页面
<!DOCTYPE html>
<html>
<head>
	<title>jQuery 在 5 秒后显示和隐藏</title>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
	<div id="myDiv">这是一个 div 元素。</div>

	<script src="script.js"></script>
</body>
</html>

在 HTML 页面中，我们引入了 jQuery 库以及一个 div 元素，并指定了一个 JavaScript 脚本（script.js）。

JavaScript 脚本
$(document).ready(function() {
	setTimeout(function(){
		$('#myDiv').fadeOut();
	}, 5000);

	setTimeout(function(){
		$('#myDiv').fadeIn();
	}, 10000);
});

在 JavaScript 脚本中，我们使用 jQuery 的 $(document).ready() 方法来确保页面加载完成后再执行脚本。

然后，我们使用 JavaScript 中的 setTimeout() 方法，分别在 5 秒和 10 秒后执行两个匿名函数。第一个函数使用 jQuery 的 fadeOut() 方法，将 #myDiv 元素淡出隐藏；第二个函数使用 fadeIn() 方法，将 #myDiv 元素淡入显示。

运行效果

运行效果

在页面加载完成后，div 元素会在 5 秒后自动淡出隐藏，然后在 10 秒后再次自动淡入显示。

总结

以上就是使用 jQuery 在 5 秒后显示和隐藏页面元素的方法。通过使用 jQuery，我们可以更加便捷地操作页面元素和处理事件。