jQuery：元素的隱藏和顯示

阿新 • • 發佈：2021-08-28

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>