动画隐藏div

最新推荐文章于 2023-02-19 21:33:47 发布

chuanhao5875

最新推荐文章于 2023-02-19 21:33:47 发布

阅读量122

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/mapp/blog/967542

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    </head>
    <body>
        <div id="1" style="width: 500px;height: 500px;background-color: red;">
            
        </div>
        <div id="2" style="width: 500px;height: 500px;background-color: blue;">
            
        </div>
        <a id="3" href="javascript:;" onclick="togglediv()">隐藏</a>
    </body>
    <script>
        function togglediv() {
            var height = $("#1").css("height");
            if (height != "0px") {
                $("#3").text("显示");
                $("#1").animate({height:0},1000);
            }else {
                $("#3").text("隐藏");
                $("#1").animate({height:500},1000);
            }
            
        }
    </script>
</html>

转载于:https://my.oschina.net/mapp/blog/967542