« BAB Sebelumnya - BAB 2: Sintaks
$(sasaran).animate({properti:"value", properti:"value"}, durasi);Sasaran: yaitu objek yang akan dikenai perintah
Properti: properti CSS (dalam sintaks JQuery) yang akan dianimasikan
Value: nilai properti.
Durasi: yaitu kecepatan aksi. Nilainya dapat berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'.
Contoh Penerapan Efek .animate() untuk Nilai Bertipe Numerik
Kita buat sebuah tombol dan sebuah area target. Tombol yang kita buat berfungsi untuk menganimasikan elemen:
Kerangka
<button class='animasi'>Memanjang!</button> <div id='target'> <!-- Konten di Sini --> </div>CSS
#target { background:#123456; width:210px; height:50px; padding:5px; }Deklarasi JQuery
$(document).ready(function() { $('.animasi').click(function() { $('#target').animate({width:"800px"}, 1000); }); });Contoh Penerapan Efek .animate() untuk Nilai Bertipe Warna
BAB sebelumnya, bahwa dampak animasi warna dapat dibentuk dengan syarat menambahkan plugin berupa jquery.animate-colors-min.js yang dipasang bersama JQuery. Untuk itu, hal pertama yang harus kau lakukan yaitu memasang script jquery.animate-colors-min.js di dalam template:
<script type='text/javascript' src='http://hompimpa.googlecode.com/files/jquery.animate-colors-min.js'></script>Setelah itu barulah kita dapat menerapkan properti-properti warna dalam deklarasi JQuery:
Kerangka
<button class='animasi'>Berubah!</button> <div id='target'> <!-- Konten di Sini --> </div>CSS
#target { background:#FF00FF; color:#000000; width:210px; height:100px; padding:5px; }Deklarasi JQuery
$(document).ready(function() { $('.animasi').click(function() { $('#target').animate({backgroundColor:"#000080", color:"#ffffff"}, 1000); }); });