Programming, tutorials, mechatronics, operating systems, and other tech stuff

Belajar jquery : Fungsi animate jquery untuk menganimasikan elemen web

No comments
Kali ini kita akan membahas tentang fungsi animate di jquery. Fungsi ini berguna untuk membuat animasi pada elemen web.

Untuk penjelasan dasar tentang cara menggunakan jquery, bisa anda baca di artikel Tutorial dasar menggunakan jquery untuk mempercantik halamanweb

Dalam contoh ini kita menggunakan file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web.

Struktur dasar fungsi animate adalah:
.animate(property css dalam kurung kurawal,durasi waktu dalam milidetik);

Misalnya:


[code lang="javascript"]$('#kotak').animate({'margin-left':'100px'},1000);[/code]


bisa juga dibaca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px”, menjadi “margin-left:100px”.
dalam durasi 1 detik(1000milidetik).

Keterangan:kondisi “margin-left” awal elemen adalah 0px karena tidak diatur css-nya(default).

Sekarang kita coba:

[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px' , 'height':'300px' },500);[/code]


bisa juga kita baca:
elemen yang mempunyai id=kotak.
dianimasikan dari kondisi awal “margin-left:0px” dan “height:50px”, menjadi “margin-left:100px” dan “height:300px”.
dalam durasi setengah detik(500ms).

bingung kenapa kondisi awal “height:50px”? sudah ane bilang kan, kalau kita menggunakan contoh file yang sama dengan yang ada di artikel Tutorial dasar menggunakan jquery untuk mempercantik halaman web. :D

Kita bisa menambahkan beberapa property css sekaligus dalam satu animasi dengan dipisahkan koma.

Untuk menambahkan animasi, kita hanya perlu menambahkan fungsi animate setelahnya, dipisahkan dengan titik. Misalnya:


[code lang="javascript"]$('#kotak').animate({ 'margin-left':'100px'},1000).animate({ 'margin-top':'100px'},1000).animate({'font-size':'20px'},1000);[/code]


Simpan dan coba hasilnya. :)
Sekian artikel tentang fungsi animate jquery, untuk artikel tentang fungsi-fungsi jquery lainnya bisa agan temukan di submenu jquery di menu programming.
Selamat belajar. :) dan jangan lupa +1 ;)

P.S:Copas silahkan, tapi jangan lupa cantumkan sumber. ;)

No comments :

Post a Comment