Selain menuliskan angka secara apa adanya dalam nilai properti animasi, sebuah sistem animasi dalam JQuery juga sanggup dituliskan dengan nilai relatif. Hal ini akan membuat efek kumulatif (bertambah/berkurangnya nilai sedikit demi sedikit) untuk membuat langkah-langkah objek secara bertahap melalui perintah yang diberikan berkali-kali.
Sintaks
$(sasaran).animate({"properti": "+=N"}, durasi); $(sasaran).animate({"properti": "-=N"}, durasi);N yaitu nilai properti relatif.
Contoh Penerapan Animasi Kumulatif
Di sini Saya membuat dua buah tombol dan sebuah area target. Tombol pertama dipakai untuk memperlihatkan perintah "bergerak ke kanan!" sedangkan tombol yang ke dua dipakai untuk memperlihatkan perintah "bergerak ke kiri!"
Kerangka
<div id='boks1'></div> <button id='left'>«</button> <button id='right'>»</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'); }); });Pandangan Lebih Jauh
Mungkin kau tidak tahu bahwa konsep animasi kumulatif ini bergotong-royong juga sanggup dijadikan sebagai cikal-bakal terciptanya sebuah slider JQuery. Dengan sedikit kreativitas, sebuah slider sederhana sanggup dibentuk dengan menerapkan animasi kumulatif ini:
Sumber https://www.dte.web.id/