JQuery Div的动态显示及动态隐藏

最新推荐文章于 2024-04-23 02:00:49 发布

ALLsharps

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量8k

点赞数

文章标签： jquery div function xhtml border html

本文链接：https://blog.csdn.net/allsharps/article/details/6918401

版权

<!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>

ALLsharps

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Div的动态显示及动态隐藏

$(document).ready(function () { $("#b1").click(function () { $("#div2").animate({ height: "2px" }, 400); $("#div2").animate({ width: "2px" }, 400, function () {
复制链接

扫一扫