jQueryshow()和hide()方法

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

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

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

您可以選擇指定持續(xù)時(shí)間(也稱為速度)參數(shù)，以使 jQuery 顯示隱藏效果在指定時(shí)間段內(nèi)進(jìn)行動(dòng)畫(huà)處理。

可以使用預(yù)定義的字符串'slow'或'fast'或以毫秒數(shù)之一來(lái)指定持續(xù)時(shí)間，以獲得更高的精度;較高的值表示較慢的動(dòng)畫(huà)。

<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方法完成后要執(zhí)行的回調(diào)函數(shù)。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()方法顯示或隱藏元素，如果元素最初顯示，它將被隱藏;如果隱藏，它將被顯示(即切換可見(jiàn)性)。

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

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

<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>

同樣，您也可以為該方法指定一個(gè)回調(diào)函數(shù)。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>

以上就是關(guān)于“jQuery效果：顯示和隱藏”的介紹，大家如果想了解更多相關(guān)知識(shí)，可以來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的jQuery視頻教程，里面的課程內(nèi)容很詳細(xì)，由淺到深，通俗易懂，適合沒(méi)有基礎(chǔ)的小伙伴學(xué)習(xí)，希望對(duì)大家能夠有所幫助。