Jquery-ui merupakan sebuah plugin atau library dari jquery yang berguna untuk membuat efek dan animasi interaktif pada halaman website. Jquery-ui ini masih dalam bagian jquery, jadi jika kita ingin menggunakan jquery-ui maka harus disertakan pula library jquery.
dan pada kesempatan kali ini kita akan mengimplementasikan salah satu efek atau kecanggihan dari jquery-ui yaitu Cara Membuat Color Animation Effect dengan Jquery-ui. Color animation effect disini adalah animasi dari jquery-ui untuk merubah warna attribut secara langsung. Tidak usah bingung, Caranya sangat mudah teman-teman, silahkan coba dipraktikan saja. Teman-teman Jalankan/run text-editornya lalu Ketik script pada gambar dibawah ini :
Penjelasan dari script diatas yang saya berikan tanda merah merupakan sebuah style dasar dari sebuah element div dimana awalnya berwarna merah serta ukuran width dan height nilainya 100px dan diberikan lengkungan dengan border-radius 50%.
Lalu tanda yang berwarna biru dibawah style css merupakan sebuah library jquery serta jquery-ui. Dan event fungsi nya saya letakan dibawah yang saya berikan tanda biru juga dimana pada script tsb menjelaskan bahwa ketika button diklik maka akan menjalankan fungsi animate dimana isinya merubah warna background, ukuran serta tidak memberikan lengkungan.
Oke coba silahkan teman-teman simpan kode diatas, jika sudah coba dijalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Bagaimana teman-teman cukup mudah bukan ? untuk kedepannya silahkan teman-teman baca saja diwebsite resminya dari jquery-ui disini >> http://api.jqueryui.com/1.11/category/effects/
Oke kalau begitu cukup sekian dipembahasan kali ini tentang Cara Membuat Color Animation Effect dengan Jquery-ui. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih