效果1-时间展示-隐藏

1.效果

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>动画效果-隐藏-显示-动画</title>
	<script src="./js/jquery.js"></script>
	<style>
		.op {
			height: 100px;
			width: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="op"></div>
	<input type="button" value="hide" class="hide">
	<input type="button" value="show" class="show">
	<input type="button" value="toggle" class="toggle">
</body>
</html>
<script>
	$(function(){
		$(".hide").click(function(){
			//$(".op").hide(1000);//隐藏
			$(".op").slideUp(1000);//先上划出隐藏
		})
		$(".show").click(function(){
			//$(".op").show(1000);//展示
			$(".op").slideDown(1000);//想下划出展示
		});

		$(".toggle").click(function(){
			$(".op").slideToggle(1000);//双方都兼容 
		})
	})
</script>

　　

posted on 2021-12-07 15:36  孤灯引路人  阅读(67)  评论(0)    收藏  举报

导航