jQuery：元素的隐藏和显示

1 改变元素的宽和高（带动画效果）

　　show( speed )：显示

　　hide( speed )：隐藏

　　toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>

    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            //fast:快速的
            //slow:缓慢的
            //毫秒：自定义
            $("div").hide(2000);
        });

        $("#btn1").click(function(){
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

 

 

2 改变元素的高（拉伸效果）

　　slideDown( speed ) ：显示

　　slideUp( speed )：隐藏

　　slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").slideUp(1000); //向上收缩
    });

    $("#btn1").click(function(){
        $("div").slideDown(1000); //向下伸展
    });

    $("#btn3").click(function(){
        $("div").slideToggle(1000); //切换
    });
</script>

 

3 不改变元素的大小（淡入淡出效果）

　　fadeIn( speed ) 显示

　　fadeOut( speed ) 隐藏

　　fadeToggle( speed ) 等价于fadeIn+fadeOut动画

　　fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn2").click(function(){
        $("div").fadeOut(1000); // 隐藏：淡出我的视线
    });

    $("#btn1").click(function(){
        $("div").fadeIn(1000); // 显示：映入眼帘
    });

    $("#btn3").click(function(){
        $("div").fadeToggle(1000); // 切换
    });

    $("#btn4").click(function(){
       $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
    });
</script>

 

4 链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；

例如：点击一次按钮，让div完成4个指定动作

　　1. 背景变粉

　　2. 字体变绿

　　3. 收缩

　　4. 拉伸

<style>
div{
    width: 200px;
    height: 200px;
    background-color: black;
    color:white;
    font-size: 3em;
}
</style>
<body>
    <button>试试</button>
    <div>hello</div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){              
$("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000);
});
　　</script>
</body>

 

posted @ 2021-08-28 16:47  Jasper2003  阅读(118)  评论(0)  编辑  收藏  举报