jquery

Membuat Efek Hide dan Show Menggunakan JQuery

Membuat Efek Hide dan Show Menggunakan JQuery – JQuery merupakan salah satu library JavaScript yang banyak digunakan. Selain karena penggunaannya yang mudah, JQuery pun dapat menghemat penulisan syntax JavaScript. Belum lagi tersedianya banyak efek – efek visual yang dapat mempercantik tampilan website.

Salah satu efek yang dapat dibuat menggunakan JQuery adalah efek menyembunyikan kemudian menampilkan (hide dan show) sebuah element html atau web.

Efek hide merupakan efek yang digunakan untuk menyembunyikan element html, sedangkan efek show merupakan kebalikan dari efek hide, yaitu menampilkan sebuah element web.

Untuk membuat efek hide dan show kita dapat menggunakan method hide() dan show(),

Perhatikan contoh berikut :

Hasil :

See the Pen on CodePen.

 

Dari kode diatas, saya membuat dua buah tombol , yaitu tombol hide dan tombol show. Dengan id  tmbl-hide untuk tombol hide dan id tmbl-show untuk tombol show. Dan juga sebuah tag div dengan id kotak. Kamu bisa mengubah nama id tersebut sesuai dengan keinginanmu.

Saat tombol hide diklik, maka akan dijalankan perintah $(“#kotak”).hide() sehingga kotak berwarna biru akan disembunyikan. Sebaliknya saat tombol show diklik, maka akan dijalankan perintah $(“#kotak”).show() sehingga kotak berwarna biru akan dimunculkan kembali.

 

Baca Juga : Tutorial Belajar HTML Dasar

 

Kita juga dapat mengatur kecepatan dari efek hide dan show. Dengan cara menambahkan argument slow atau fast. Jika ingin lebih spesifik, kita dapat menambahkan angka dalam satuan milisecond.

Perhatikan contoh berikut:

Live demo:

See the Pen on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *