Jquery实现DIV垂直方向上展开

最新推荐文章于 2021-03-19 06:00:22 发布

u013554470

最新推荐文章于 2021-03-19 06:00:22 发布

阅读量396

点赞数

本文链接：https://blog.csdn.net/u013554470/article/details/22792987

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>animate</title>
<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
	   
	   $("#btn").click(function () {
		  // alert("btn");
		  $("#mainDiv").animate({height: "520px", top: "20%"}, 500);
	   });
	  
	   $("#close").click(function () {
		   $("#mainDiv").animate({height : 0, top: "35%"}, 500);
	   });
	  
})
</script>
<style type="text/css">
 #mainDiv {
            width: 40%;
            background-color: #FFEEDD;
            margin:auto;
            position: absolute;
            height: 0;
            margin-left:30%;
            top: 50%;
            overflow: hidden;
         }
</style>
</head>
<body>
<button id="btn"  >展开</button>
<button id="close"  >收缩</button>
<div id="mainDiv" ></div>

</body>
</html>