JQuery .animate() - Sintaks

« BAB Sebelumnya - BAB 2: Sintaks

$(sasaran).animate({properti:"value", properti:"value"}, durasi);

Sasaran: adalah objek yang akan dikenai perintah
Properti: properti CSS (dalam sintaks JQuery) yang akan dianimasikan
Value: nilai properti.
Durasi: adalah kecepatan aksi. Nilainya bisa 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);
    });
});

Hasil Akhir

Contoh Penerapan Efek .animate() untuk Nilai Bertipe Warna

Seperti yang pernah Saya katakan di BAB sebelumnya, bahwa efek animasi warna bisa dibuat dengan syarat menambahkan plugin berupa jquery.animate-colors-min.js yang dipasang bersama JQuery. Untuk itu, hal pertama yang harus kamu lakukan adalah 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 bisa 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);
    });
});

Hasil Akhir

Bab Berikutnya »