JQuery .animate() - Animasi Relatif Kumulatif

Selain menuliskan angka secara apa adanya dalam nilai properti animasi, sebuah sistem animasi dalam JQuery juga dapat dituliskan dengan nilai relatif. Hal ini akan menciptakan efek kumulatif (bertambah/berkurangnya nilai sedikit demi sedikit) untuk menciptakan langkah-langkah objek secara bertahap melalui perintah yang diberikan berkali-kali.

Sintaks

$(sasaran).animate({"properti": "+=N"}, durasi);
$(sasaran).animate({"properti": "-=N"}, durasi);

N adalah nilai properti relatif.

Contoh Penerapan Animasi Kumulatif

Di sini Saya membuat dua buah tombol dan sebuah area target. Tombol pertama digunakan untuk memberikan perintah "bergerak ke kanan!" sedangkan tombol yang ke dua digunakan untuk memberikan perintah "bergerak ke kiri!"

Kerangka

<div id='boks1'></div>
<button id='left'>&laquo;</button>
<button id='right'>&raquo;</button>

CSS

#boks1 {
  position:relative;
  background:#ef5655;
  width:60px;
  height:50px;
  margin:2px;
}

Deklarasi JQuery

$(document).ready(function() {
    $('#right').click(function() {
        $('#boks1').animate({"left": "+=60px"}, 'fast');
    });
    $('#left').click(function() {
        $('#boks1').animate({"left": "-=60px"}, 'fast');
    });
});

Hasil Akhir

---

Pandangan Lebih Jauh

Mungkin kamu tidak tahu bahwa konsep animasi kumulatif ini sebenarnya juga bisa dijadikan sebagai cikal-bakal terciptanya sebuah slider JQuery. Dengan sedikit kreativitas, sebuah slider sederhana dapat dibuat dengan menerapkan animasi kumulatif ini:

Lihat Demo