JQuery .animate() - Sintaks

Tabel Konten
  1. « BAB Sebelumnya - BAB 2: Sintaks 
  2. Contoh Penerapan Efek .animate() untuk Nilai Bertipe Numerik 
    1. Kerangka 
    2. CSS 
    3. Deklarasi JQuery 
  3. Contoh Penerapan Efek .animate() untuk Nilai Bertipe Warna 
    1. Kerangka 
    2. CSS 
    3. Deklarasi JQuery 

« 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 

jquery .animate()

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 

jquery animate color warna animasi

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 »

7 Komentar

  • Unknown

    kok habis memanjang atau berubah gag bisa balik lagi ya??

  • Taufik Nurrohman

    @Bayu Aldi Yansyah: Ya, tidak kembali karena ini hanya efek sekali klik, dan perintahnya memang hanya menganimasikan panjang elemen saja. Kalau mau yang bisa bolak-balik bisa pakai deklarasi width:"toggle"

  • iam

    Wuaaah jquery kereeen :D Jadi pengin ubek2 jquery, tapi lagi fokus dulu ke web desain >.<

  • iam

    Misi, mampir ah bro :D

  • Anonim

    Numpang Sedot gan

  • Unknown

    kalau untuk ngembaliin konten ke ukuran semula, menggunakan tombol yg sama. codenya gimana bang ? 0:)

  • Taufik Nurrohman

    $(function() {
    $('button').toggle(function() {
    $('div').animate({width:400}, "slow");
    }, function() {
    $('div').animate({width:100}, "slow"); // `100` diambil dari ukuran awal
    });
    });

    Demo: http://jsfiddle.net/tovic/N6RrA/

Komentar telah ditutup.