Tutorial jQuery Part 3 (VA)

 Tutorial jQuery part 3 : Membuat Efek slide dengan jQuery

Tutorial jQuery part 3 ini akan membahas tentang membuat efek slide menggunakan jQuery. Seperti yang digunakan  di tutorial-tutorial sebelumnya, kali ini kita tetap menggunakan file jQuery yaitu jquery-2.1.4.js yang bisa didownload di internet atau langsung di situs resmi jQuery.

Di efek slide ini kita akan membahas tentang 2 metode yaitu slideUp() dan slideDown() yang kita dapat tau artinya dari nama metode yaitu slideUp adalah efek yang ketika kita click maka akan menyembunyikan element yang ada ke arah atas sedangkan slideDown adalah efek yang ketika kita click maka akan menampilkan data yang tadi kita sembunyikan ke arah bawah.

Seperti biasa kita mulai dengan menulisankan tag-tag yang ada di html :

Setelah itu kita mulai dengan menuliskan tag <button> yang akan kita beri function nantinya.Maka kita beri button 2 yaitu slide up dan slide down yang masing-masing kita berikan metode slideUp() dan slideDown() juga tag <div> yang akan menjadi element yang akan diberi efek :

Setelah itu maka kita akan memberikan CSS dimana kita bisa berkreasi di tutorial kali ini saya menggunakan tag <div> yang akan saya kreasikan sedangkan untuk button saya lebih memilih button yang standar, tetapi jika kalian ingin mengubah warna button nya bisa hanya membuat class baru yang kita tinggal ubah-ubah warna buttonnya. Tetapi untuk tutorial kali ini saya hanya membuat class untuk tulisan yang akan saya beri di tag <div> nantinya. Maka codingnya adalah :

Setelah selesai untuk CSS nya maka kita akan memberi functionnya yaitu slideUp() yang diberi efek "slow" maka akan perlahan naik sedangkan untuk slideDown diberi efek "fast" maka akan dengan cepat elementnya turun efek ini hanya dapat muncul ketika kita klik maka kita mengambil id yang telah kita tulis untuk medeteksi yang mana id slideUp dan yang mana id slideDown pada saat di click sehingga akan menampilkan efek yang sesuai. Codingnya :

Maka untuk outputnya adalah seperti ini :

 Pada saat kita click button slide up (menyembunyikan element yang ada ) maka outputnya adalah :

Sampai disini tutotial jQuery saya kali ini, selebihnya akan dibahas di tutorial selanjutnya.

Thankyou for reading and have a nice day ,May God bless you:).

"Beware of bugs in the above code; I have only proved it correct, not tried it."

- Donald E. Knuth.