jQueryshow()和hide()方法

您可以使用 jQueryshow()和hide()方法顯示和隱藏HTML元素。

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

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

您可以選擇指定持續時間(也稱為速度)參數，以使 jQuery 顯示隱藏效果在指定時間段內進行動畫處理。

可以使用預定義的字符串'slow'或'fast'或以毫秒數之一來指定持續時間，以獲得更高的精度;較高的值表示較慢的動畫。

<script>
$(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>

您還可以指定在or方法完成后要執行的回調函數。show()hide()

<script>
$(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>

jQuerytoggle()方法

jQuerytoggle()方法顯示或隱藏元素，如果元素最初顯示，它將被隱藏;如果隱藏，它將被顯示(即切換可見性)。

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

類似地，您可以為方法指定持續時間參數，toggle()使其像show()和hide()方法一樣具有動畫效果。

<script>
$(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>
$(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效果：顯示和隱藏”的介紹，大家如果想了解更多相關知識，可以來關注一下動力節點的jQuery視頻教程，里面的課程內容很詳細，由淺到深，通俗易懂，適合沒有基礎的小伙伴學習，希望對大家能夠有所幫助。