Tutorial Belajar jQuery Part 19: Cara Membuat Efek Slide dengan jQuery

Posted on

Setelah efek Show, Hide, Fadein dan Fadeout, di panduan belajar jQuery kali ini kita akan membahas cara membuat efek Slide dengan jQuery.


Membangun Efek Slide dengan jQuery

Efek slide yaitu efek kemunculan sebuah faktor HTML dengan cara turun dari atas kebawah. Untuk mendesain efek ini, jQuery menyediakan 2 buah method: slideUp() dan slideDown().

Seperti yang dapat ditebak, method slideUp() digunakan untuk menyembunyikan element (naik ke atas), sedangkan method slideDown() digunakan untuk memunculkan element (turun ke bawah), pastinya dengan efek sliding.

Untuk memenej kecepatan efek, kita dapat menggunakan keyword “slow”, “fast”, atau angka selaku argumen method ini (di satuan milisecond).

Berikut contoh pemakaian efek slide di di jQuery:

Contoh kali ini masih sama seperti contoh yang saya gunakan di panduan show dan fade sebelumnya, dimana saya mempunyai sebuah box pink dan dengan 2 tombol: SlideUp dan SlideDown.

Ketika tombol SlideUp di klik, efek slideup akan dijalankan via pedoman $(“#box”).slideUp(“slow”). Box pink akan ‘naik’ secara perlahan.

Ketika SlideDown di klik, edek slidedown akan menurunkan box pink dengan cepat. Ini dilakukan dari pedoman $(“#box”).slideDown(“fast”).

Rekan rekan dapat mencobanya via 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 pun menyediakan method slideToggle() yang berfungsi selaku gabungan dari method slideUp() dan slideDown(). Kedua efek ini akan dijalankan secara bergantian.

Seketika saja kita lihat contoh prakteknya:

See the Pen Cara Membuat Efek Slide dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Di ketika tombol Slide! Di klik, pedoman $(“#box”).slideToggle(“slow”) akan memeriksa status dari box ketika ini. Bila sedang tampil, lakukan slideUp. Bila box telah tak ada, lakukan slideDown.

Di panduan jQuery kali ini kita telah membahas cara penggunaan efek slide di dalam jQuery, yang dapat dilakukan menggunakan 3 method: slideUp, slideDown, dan slideToggle. Berikutnya, saya akan membahas efek yang tak kalah menarik, yakni membuat animasi dengan jQuery.


Sumber https://www.duniailkom.com/