jQuery 之显示与隐藏

最新推荐文章于 2023-06-15 15:44:35 发布

启之灵

最新推荐文章于 2023-06-15 15:44:35 发布

阅读量242

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/85566228

版权

jQuery 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>23_显示与隐藏</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 50px;
        left: 10px;
        background: red;
        display: none;
    }
</style>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>

<div class="div1">
</div>

<!--
显示隐藏，默认没有动画, 动画(opacity/height/width)
1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
    需求:
    1. 点击btn1, 立即显示
    2. 点击btn2, 慢慢显示
    3. 点击btn3, 慢慢隐藏
    4. 点击btn4, 切换显示/隐藏
     */
    var $div1 = $('.div1')
    //1. 点击btn1, 立即显示
    $('#btn1').click(function () {
        $div1.show()
    })

    //2. 点击btn2, 慢慢显示
    $('#btn2').click(function () {
        $div1.show(1000)
    })

    //3. 点击btn3, 慢慢隐藏
    $('#btn3').click(function () {
        $div1.hide(1000)
    })

    //4. 点击btn4, 切换显示/隐藏
    $('#btn4').click(function () {
        $div1.toggle(1000)
    })
</script>
</body>
</html>