Untuk membuat website yang interaktif tidak lepas dari peran Jquery di dalamnya. Karena Jquery memang spesialis untuk membuat website terlihat lebih dinamis dan interaktif antara website dengan pengunjung. Maka dari itu jika kalian ingin membuat website yang keren, ada baiknya harus memperdalam materi tentang jquery. Kalian pernah melihat sebuah tombol menu dropdown dengan efek delay saat ditekan ?. Hal tersebut bisa dibuat dengan CSS3, namun dengan Jquery kita bisa membuatnya lebih simple dan tidak terlalu banyak codenya.

Sesuai dengan pembahasan kali ini kita akan belajar sebuah fungsi yang ada pada jquery yaitu fungsi slideDown pada jquery. Fungsi slidedown ini adalah untuk membuat animasi sederhana pada objek tertentu agar mempunyai efek seperti bergerak dari atas ke bawah. Istilahnya yaitu slidedown. Fungsi ini sering sekali digunakan untuk membuat tombol menu dropdown contohnya. Jadi jika kalian menemukan website dengan contoh seperti itu, maka kalian sudah bisa menebak, menu kemungkinan menggunakan fungsi slidedown.

Agar lebih memahami lagi fungsi slidedown ada baiknya kita mulai dengan praktek. Kalian buat file dengan format HTML, dan kalian salin contoh code dibawah ini ya.

slide.html

Setelah sudah kalian simpan dan lihat hasilnya pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

ini adalah tampilan awal tombolnya. Jika kalian coba tekan tombol tersebut maka akan terjadi efek slidedown seperti gambar dibawah.

Akan muncul kata halooo pada bagian dibawah tombol, munculnya pun tidak langsung. Sedikit ada delay sehingga gerakanya lebih halus. Seperti itu kira-kira contoh pengaplikasian slidedown pada Jquery.

Kalian bisa modifikasi untuk website kalian sesuai dengan kebutuhan.

Oke sekian pembahasan mengenai fungsi slidedown pada jquery. Semoga artikel kali ini bermanfaat untuk kita semua.