Setelah efek Show, Hide, Fadein dan Fadeout, dalam tutorial belajar jQuery kali ini kita akan membahas cara membuat efek Slide dengan jQuery.
Membuat Efek Slide dengan jQuery
Efek slide adalah efek kemunculan sebuah elemen HTML dengan cara turun dari atas kebawah. Untuk membuat efek ini, jQuery menyediakan 2 buah method: slideUp() dan slideDown().
Seperti yang bisa ditebak, method slideUp() digunakan untuk menyembunyikan element (naik ke atas), sedangkan method slideDown() digunakan untuk memunculkan element (turun ke bawah), tentunya dengan efek sliding.
Untuk mengontrol kecepatan efek, kita bisa menggunakan keyword “slow”, “fast”, atau angka sebagai argumen method ini (dalam satuan milisecond).
Berikut contoh penggunaan efek slide di dalam jQuery:
Belajar jQuery Duniailkom
Belajar jQuery Duniailkom
Contoh kali ini masih sama seperti contoh yang saya gunakan dalam tutorial show dan fade sebelumnya, dimana saya memiliki sebuah box pink dan dengan 2 tombol: SlideUp dan SlideDown.
Ketika tombol SlideUp di klik, efek slideup akan dijalankan melalui perintah $(“#box”).slideUp(“slow”). Box pink akan ‘naik’ secara perlahan.
Ketika SlideDown di klik, edek slidedown akan menurunkan box pink dengan cepat. Ini dilakukan dari perintah $(“#box”).slideDown(“fast”).
Anda bisa mencobanya melalui link codepen dibawah ini:
See the Pen Cara Membuat Efek Slide dengan jQuery 1 by duniailkom (@duniailkom) on CodePen.10206
Method slideToggle() jQuery
Masih sama seperti efek jQuery sebelumnya, jQuery juga menyediakan method slideToggle() yang berfungsi sebagai gabungan dari method slideUp() dan slideDown(). Kedua efek ini akan dijalankan secara bergantian.
Langsung saja kita lihat contoh prakteknya:
Belajar jQuery Duniailkom
Belajar jQuery Duniailkom
See the Pen Cara Membuat Efek Slide dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206
Pada saat tombol Slide! Di klik, perintah $(“#box”).slideToggle(“slow”) akan memeriksa status dari box saat ini. Jika sedang tampil, lakukan slideUp. Jika box sudah tidak ada, lakukan slideDown.
Dalam tutorial jQuery kali ini kita telah membahas cara penggunaan efek slide di dalam jQuery, yang bisa dilakukan menggunakan 3 method: slideUp, slideDown, dan slideToggle. Berikutnya, saya akan membahas efek yang tak kalah menarik, yakni membuat animasi dengan jQuery.
Sumber wk.com
EmoticonEmoticon