Tutorial Belajar jQuery Part 17: Cara Membuat Efek Show dan Hide jQuery

Selain efek-efek dasar JavaScript, seperti menambahkan elemen atau memanipulasi kode CSS, jQuery juga menyediakan berbagai efek visual menarik lainnya. Kali ini kita akan membahas Cara Membuat Efek Show dan Hide elemen HTML dengan jQuery.

---

Membuat Efek Show dan Hide dengan jQuery

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan. Untuk membuat kedua efek ini kita bisa menggunakan method show() dan hide() jQuery.

Langsung saja kita masuk ke dalam contoh praktek dari kedua method ini:

   


Belajar jQuery Duniailkom

Disini saya memiliki sebuah box

yang sudah dihiasi dengan CSS. Ketika tombol Hide di klik, akan dijalankan perintah: $(“#box”).hide(). Akibatnya, kotak pink hilang, ketika tombol Show di klik, perintah $(“#box”).show() akan mengembalikan lagi kotak tersebut.

Silahkan anda coba sendiri dari link codepen dibawah ini:

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Tapi tunggu dulu, kenapa efeknya cepat sekali?

jQuery juga mengizinkan kita untuk mengatur kecepatan animasi efek show() dan hide(). Caranya dengan menambahkan salah satu keyword: “slow” atau “fast” sebagai argumen method ini, seperti contoh berikut:

$("#box").hide("slow");

Untuk pengaturan yang lebih detail, kita bisa menginput angka dalam satuan milisecond, seperti:

$("#box").hide(1000);

Ini artinya efek hide akan membutuhkan waktu 1 detik (1000 milisecond) untuk selesai. Berikut contoh perubahannya pada kode program sebelumnya:

   


Belajar jQuery Duniailkom

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Sekarang, efek hide dan show berjalan dengan lebih pelan.

Dapat juga anda perhatikan bahwa efek hide() ini dijalankan dengan cara menyembunyikan element HTML ke sudut kiri atas.

---

Method toggle() jQuery

Selain method hide() dan show(), jQuery masih memiliki method toggle() yang berfungsi sebagai gabungan efek hide dan show. Method ini akan menyembunyikan (hide) element HTML jika saat ini sedang muncul, atau memunculkan (show) element tersebut jika saat ini tersembunyi.

Berikut contoh penggunaannya:

   


Belajar jQuery Duniailkom

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 3 by duniailkom (@duniailkom) on CodePen.10206

Silahkan anda klik tombol Hide/Show, kotak box akan bergantian dari hide ke show dan sebaliknya.

Masih berhubungan dengan efek jQuery, dalam tutorial berikutnya kita akan mempelajari Cara Membuat Efek Fade untuk elemen HTML menggunakan jQuery.

Sumber wk.com