jQuery : Efek Show dan Hide

Metode show() dan hide()

Kalian dapat menampilkan dan menyembunyikan elemen HTML menggunakan metode jQuery show() dan hide().

Metode hide() cukup mengatur inline style display: none untuk elemen yang dipilih. Sebaliknya, metode show() mengembalikan display properties dari set elemen yang cocok ke awalnya — blok, inline, atau inline-block — sebelum inline style display: none diterapkan pada mereka. Berikut contohnya.

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

Opsional kalian dapat menentukan parameter durasi (juga disebut sebagai kecepatan) untuk membuat efek jQuery show-hide dianimasikan selama periode waktu tertentu.

Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan ‘slow’ atau ‘fast’, atau dalam beberapa milidetik, untuk presisi yang lebih baik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.

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

Catatan: Kecepatan atau string durasi ‘fast’ menunjukkan durasi 200 milidetik, sedangkan string ‘slow’ menunjukkan durasi 600 milidetik.

Kalian juga dapat menentukan callback function yang akan dieksekusi setelah metode show() atau hide() selesai.

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

Metode toggle()

Metode toggle() jQuery menampilkan atau menyembunyikan elemen sedemikian rupa sehingga jika elemen tersebut awalnya ditampilkan, maka itu akan disembunyikan; jika disembunyikan, maka itu akan ditampilkan (mis. matikan visibilitas).

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

Demikian pula, kalian dapat menentukan parameter durasi untuk metode toggle() untuk menjadikannya animasi seperti pada metode show() dan 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>

Demikian pula, kalian juga dapat menentukan callback function untuk metode 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>