首页 >web前端 >前端问答 >jquery怎么实现五秒自动隐藏

jquery怎么实现五秒自动隐藏

青灯夜游原创: 2022-05-16 15:01:341740浏览

两种方法：1、“setTimeout(function(){指定对象.hide();},5000);”语句，通过设置定时器来实现延迟效果。2、用“指定对象.delay(5000).fadeOut();”语句，通过延迟代码执行时间来实现效果。

jquery怎么实现五秒自动隐藏

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery实现五秒自动隐藏

1、使用 setTimeout() 方法

使用setTimeout()方法设置5秒后执行function()方法
在function()方法内，使用hide()方法实现指定元素。

$(document).ready(function() {
	$("button").click(function() {
		setTimeout(function() {
			$("div").hide(); 
		}, 5000);
	});
});

说明：

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

2、使用delay()设置五秒自动隐藏元素

delay() 方法对队列中的下一项的执行设置延迟。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>5秒隐藏div元素</button>
	</body>
</html>

【推荐学习：jQuery视频教程、web前端视频】

以上是jquery怎么实现五秒自动隐藏的详细内容。更多信息请关注PHP中文网其他相关文章！

jquery function 对象

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jquery怎么实现点击翻转效果下一篇：jquery怎么修改td宽度

查看更多