Menampilkan dan Menyembunyikan Elemen dengan jQuery

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

Metode hide() akan mengatur tampilan style inline: none untuk elemen yang dipilih. Sebaliknya, metode show() akan mengembalikan properti style dari pengaturan Display yang cocok dengan awal nya seperti block, inline, atau inline-block sebelum tampilan style inline: yang diterapkan adalah none. Berikut adalah contohnya:

<script>
    $(document).ready(function(){
        // Menyembunyikan paragraf
        $(".tombol-hide").click(function(){
            $("p").hide();
        });

        // Menampilkan paragraf
        $(".tombol-show").click(function(){
            $("p").show();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Secara opsional, kalian dapat menentukan parameter durasi (juga disebut sebagai speed) untuk membuat efek menampilkan/menyembunyikan pada jQuery yang dianimasikan selama beberapa waktu tertentu.

Durasi (Duration) dapat ditentukan baik menggunakan salah satu String yang telah ditentukan yaitu "slow" dan "fast", atau dalam satuan unit milidetik, untuk presisi yang lebih besar; nilai unit yang lebih tinggi menunjukkan animasi yang lebih lambat. Contoh:

<script>
    $(document).ready(function(){
        // Menyembunyikan paragraf dengan kecepatan yang berbeda
        $(".tombol-hide").click(function(){
            $("p.normal").hide();
            $("p.cepat").hide("fast");
            $("p.lambat").hide("slow");
            $("p.sangat-cepat").hide(50);
            $("p.sangat-lambat").hide(2000);
        });

        // Menampilkan paragraf dengan kecepatan yang berbeda
        $(".tombol-show").click(function(){
            $("p.normal").show();
            $("p.cepat").show("fast");
            $("p.lambat").show("slow");
            $("p.sangat-cepat").show(50);
            $("p.sangat-lambat").show(2000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Catatan: String kecepatan atau durasi "fast" menunjukkan durasi yaitu 200 milidetik, sedangkan string "slow" menunjukkan durasi yaitu 600 milidetik.

Kalian juga dapat menentukan fungsi pemanggilan balik (Callback) yang akan dijalankan setelah metode show() atau hide()dijalankan. Kita akan belajar lebih banyak tentang fungsi Callback pada bagian mendatang:

<script>
    $(document).ready(function(){
        // Menampilkan pesan alert setelah menyembunyikan paragraf
        $(".tombol-hide").click(function(){
            $("p").hide("slow", function(){
                // Kode yang akan dijalankan
                alert("Efek Hide sudah selesai.");
            });
        });

        // Menampilkan pesan alert setelah menampilkan paragraf
        $(".tombol-show").click(function(){
            $("p").show("slow", function(){
                // Kode yang akan dijalankan
                alert("Efek Show sudah selesai.");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Metode toggle()

Metode toggle() pada jQuery dapat menampilkan atau menyembunyikan elemen HTML, jika elemen tersebut awalnya ditampilkan (show), maka ketika metode toggle() dipanggil elemen tersebut akan disembunyikan (hide); begitupula sebaliknya:

<script>
    $(document).ready(function(){
        // Toggle display paragraf
        $(".tombol-toggle").click(function(){
            $("p").toggle();
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Demikian pula, kalian dapat menentukan parameter durasi untuk metode toggle() agar dapat ditambahkan animasi seperti metode show() dan hide():

<script>
    $(document).ready(function(){
        // Toggle paragraf dengan kecepatan yang berbeda
        $(".tombol-toggle").click(function(){
            $("p.normal").toggle();
            $("p.cepat").toggle("fast");
            $("p.lambat").toggle("slow");
            $("p.sangat-cepat").toggle(50);
            $("p.sangat-lambat").toggle(2000);
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Kalian juga dapat menentukan fungsi pemanggilan balik (Callback) pada metode toggle():

<script>
    $(document).ready(function(){
        // Menampilkan pesan alert setelah toggle paragraf
        $(".tombol-toggle").click(function(){
            $("p").toggle(1000, function(){
                // Kode akan dijalankan
                alert("Efek Toggle sudah selesai.");
            });
        });
    });
</script>

Lihat kode di Github | Lihat Live Demo

Tulis Komentar

0 Komentar