<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../scripts/jquery-1.4.4-vsdoc.js"></script>
<script src="../scripts/jquery.uitableedit.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#div2").animate({ height: "2px" }, 400);
$("#div2").animate({ width: "2px" }, 400, function () {
$("#div2").css({ display: "none" });
});
});
$("#b2").click(function () {
$("#div2").css({ display: "" });
$("#div2").animate({ width: "400px" }, 400);
$("#div2").animate({ height: "300px" }, 400);
});
});
$(document).ready(function () {
});
</script>
<style type="text/css">
#div2,#div3
{
position:absolute;
width:400px;
height:300px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:13px;
left:200px;
top:20px;
}
</style>
</head>
<body>
<button id="b1">关闭</button>
<button id="b2">打开</button>
<div id="div2"></div>
</body>
</html>
JQuery Div的动态显示及动态隐藏
最新推荐文章于 2024-03-10 18:19:17 发布