Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, pada tutorial kali ini kita masih akan belajar tentang jquery, yaitu kita akan belajar menampilkan dan menyembunyikan element html dengan jquery dengan menggunakan method fadetoggle() pada jquery.

Fungsi dari method fadetoggle() ialah merupakan gabungan dari efek fadein dan fadeout pada jquery yang bekerja dalam satu fungsi, jadi dengan menggunakan method ini kita dapat membuat dua fungsi sekaligus yaitu fadein dan fadeout dengan 1 method, oke kit alangsung saja praktekan dalam satu studi kasus, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:

Saya akan jelaskan satu-satu script diatas, pertama saya membuat sebuah kotak dengan style inline seperti diatas, lalu saya mebuat sebuah tombol yang nanti akan saya berikan fungsi jquery, setelah itu saya membuat sebuah script jquery untuk mereload library dari jquery yang bisa kita ambil dari jquery.com setelah itu saya membuat scripting jquery seperti ini:

Dimana apabila tombol diklik maka div akan mengalami method fadetoggle secara slow, jika teman-teman save maka hasilnya akan seperti berikut ini:

menampilkan dan menyembunyikan element html dengan jquery1

Jika kita klik maka kotak biru akan menghilang, begitu pula ketika kita klik lagi kotak biru akan tampil lagi, seolah membuat 2 fungsi fadein dan fadeout padahal kita hanya menggunakan satu fungsi yaitu fadetoggle.

Gimana teman-teman? cukup mudah bukan, untuk tutorial kali ini tentang menampilkan dan menyembunyikan element html dengan jquery saya rasa cukup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya,

Terima Kasih.