Tutorial Belajar jQuery Part 20: Cara Membuat Efek Animasi dengan jQuery

Posted on

Di lanjutan panduan belajar jQuery di Source Code Program kali ini kita akan mempelajari cara membuat efek animasi dengan jQuery. Method yang akan digunakan yaitu: animate().


Membangun Efek Animasi dengan jQuery

Diantara alasan populernya pemakaian jQuery yaitu kemudahan di membangun beraneka efek menarik. jQuery sendiri mempunyai plugin/library tambahan yang khusus menyediakan beraneka efek animasi, yakni jQuery UI.

Namun, library jQuery ‘standar’ tetap dapat digunakan untuk membangun efek animasi, yakni dengan menggunakan method animate(). Method animate() digunakan untuk membangun animasi antara 2 buah efek CSS. Fitur ini amat mirip dengan efek animasi di CSS3 (yang saya bahas di eBook CSS Uncover Duniailkom).

Method animate() jQuery dapat diisi dengan beraneka property CSS yang ingin dibangun efek animasinya. Selaku contoh, seandainya saya mempunyai sebuah unsur HTML berikut:

Untuk membangun efek animasi yang akan “memanjangkan” box diatas menjadi 500px, saya dapat menulis:

Perhatikan cara penulisan argumen untuk method animate() ini. Seluruh property CSS yang ingin dianimasikan mesti berada di di tanda kurung kurawal { dan }.

Bagaimana seandainya saya ingin membangun 2 buah efek sekaligus? Caranya tambahkan property CSS kedua dengan dipisah tanda koma, seperti berikut:

Pedoman diatas berarti saya ingin menganimasikan 2 efek, lebar (width) dan tinggi (height). Seketika saja kita lihat praktek penggunaannya:

Di kode diatas, saya mempunyai sebuah tombol Animate! dan sebuah box <div id=”box”>. Box ini telah di tambahkan kode CSS agar mempunyai tinggi, lebar, border dan warna abu-abu (silver).

Ketika tombol Animate! Di klik, command yang akan dijalankan yaitu selaku berikut:

Artinya, efek animasi dilakukan untuk 3 property CSS: lebar (width), tinggi (height), dan transparansi (opacity). Silahkan kamu coba seketika dari link codepen dibawah ini:

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

Yang perlu menjadi catatan, tak semua property CSS dapat dianimasikan. Khusus untuk warna, tak didukung secara bawaan. kita mesti menggunakan plugin jQuery tambahan.

Untuk penulisan property CSS yang menggunakan tanda hubung ‘ – ’ mesti dikonversi menjadi camelCase. Selaku contoh, font-size mesti diubah menjadi fontSize.


Mengatur Durasi Animasi jQuery

Method animate() dapat ditambahkan dengan argumen kedua untuk mengatur seberapa cepat sebuah efek berlangsung. Nilai yang dapat digunakan yaitu keyword seperti “slow” dan “fast”, atau dapat pun berupa angka di satuan millisecond.

Berikut contoh animasi jQuery dengan pengaturan kecepatan:

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

Kali ini saya menambahkan sebuah kata “Duniailkom” yang akan dianimasikan dengan command:

Artinya, ukuran font (font-size) akan diperbesar menjadi 40 pixel di waktu 3 detik (3000 milisecond). Silahkan kamu mencoba beraneka efek lain dengan menukar property CSS yang terdapat.

Di panduan jQuery kali ini kita telah membahas mengenai method animate() yang dapat digunakan untuk membangun efek animasi. Walaupun CSS3 pun mempunyai fitur yang sama, jQuery relatif lebih banyak didukung karena belum semua web browser mendukung CSS3. Efek-efek animasi lanjutan seperti rotate, explode, spin dipisah kedalam plugin tambahan, yakni jQuery UI.

Berikutnya, saya akan menyajikan sebuah studi kasus mengenai apa yang dapat kita lakukan dengan jQuery: Cara Membangun Game Sederhana dengan jQuery.


Sumber https://www.duniailkom.com/