jQuery 顯示和隱藏效果

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 顯示隱藏 HTML 元素。

jQuery `show()` 和 `hide()` 方法

你可以使用 jQuery show() 和 hide() 方法顯示和隱藏 HTML 元素。

hide() 方法只是為所選元素設定內聯樣式 display: none 。相反，show() 方法將匹配的元素集的顯示屬性恢復為它們最初的任何內容 - 通常是塊，內聯或內聯塊 - 在內聯樣式 display: none 應用於它們之前。這是一個例子。

<script type="text/javascript">
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

你可以選擇指定持續時間（也稱為速度）引數，以便在指定的時間段內對 jQuery show hide 效果進行動畫處理。

持續時間可以使用預定義的字串中的一個來指定 'slow' 或者 'fast' ，或在若干毫秒，對於更高的精度的; 值越高表示動畫越慢。

<script type="text/javascript">
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

注意： 速度或持續時間字串 'fast' 表示 200 毫秒的持續時間，而字串 'slow' 表示 600 毫秒的持續時間。

你還可以指定在 show() 或 hide() 方法完成後執行的回撥函式。我們將在後續章節中詳細瞭解回撥函式。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

jQuery `toggle()` 方法

jQuery toggle() 方法以這樣的方式顯示或隱藏元素：如果元素最初顯示，它將被隱藏; 如果隱藏，它將被顯示（即切換可見性）。

<script type="text/javascript">
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

同樣，你可以為 toggle() 方法指定持續時間引數，使其像 show() 和 hide() 方法一樣進行動畫處理。

<script type="text/javascript">
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

同樣，你也可以為方法指定回撥函式 toggle() 。

<script type="text/javascript">
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

jQuery show() 和 hide() 方法

jQuery toggle() 方法

jQuery `show()` 和 `hide()` 方法

jQuery `toggle()` 方法