首页 > 其他分享> > 记录11 点击改变高度(动画)和位置,再点击变回

记录11 点击改变高度(动画)和位置,再点击变回

2019-08-06 19:41:25 作者：互联网

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>点击改变高度(动画)和位置,再点击变回</title>
    <style>
        #gao {
            background-color: aquamarine;
            width: 100%;
            height: 70%;
            position: absolute;
            bottom: 0;
        }
        #dian {
            width: 98%;
            height: 40px;
            position: absolute;
            top: 50%;
        }
    </style>
</head>
<body style="height:800px;">
    <div id="gao">
        <div style="width:100%;height:100%;position: relative;">
            <button id="dian">点button改高改button位置</button>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        document.getElementById('gao').style.height = '70%';
        $("#dian").click(function () {
            if (document.getElementById('gao').style.height == '70%') {
                $("#gao").animate({
                    height: "100%"
                });
                $("#dian").animate({
                    top: "0"
                })
            } else {
                $("#gao").animate({
                    height: "70%"
                });
                $("#dian").animate({
                    top: "30%"
                });
            }
        });
    })
	</script>
</body>
</html>

标签：11,动画,top,dian,height,gao,点击,70%,animate
来源： https://blog.csdn.net/WMY10001/article/details/98649562