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

Posted on

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


Membangun Efek Show dan Hide dengan jQuery

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

Seketika saja kita masuk ke di contoh praktek dari kedua method ini:

 Disini saya mempunyai sebuah box <div id=”box”> yang telah dihiasi dengan CSS. Ketika tombol Hide di klik, akan dijalankan command: $(“#box”).hide(). Akibatnya, kotak pink hilang, ketika tombol Show di klik, command $(“#box”).show() akan mengembalikan lagi kotak tersebut.

Silahkan kamu coba sendiri dari link codepen dibawah ini:

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

Namun tunggu dulu, kenapa efeknya cepat sekali?

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

Untuk pengaturan yang lebih detail, kita dapat menginput angka di satuan milisecond, seperti:

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

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

Kini, efek hide dan show berjalan dengan lebih pelan.

Dapat pun kamu 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 mempunyai method toggle() yang berfungsi selaku gabungan efek hide dan show. Method ini akan menyembunyikan (hide) element HTML sekiranya ketika ini sedang muncul, atau memunculkan (show) element tersebut sekiranya ketika ini tersembunyi.

Berikut contoh penggunaannya:

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

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

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


Sumber https://www.duniailkom.com/