Mecha versi 2.6.3 sudah dirilis!

JQuery .animate() - Animasi Relatif Kumulatif

Tabel Konten
  1. Sintaks 
  2. Contoh Penerapan Animasi Kumulatif 
    1. Kerangka 
    2. CSS 
    3. Deklarasi JQuery 
  3. Pandangan Lebih Jauh 
jquery .animate() kumulatif

Selain menuliskan angka secara apa adanya dalam nilai properti animasi, sebuah sistem animasi dalam 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:

SlideShow JQuery

Lihat Demo

12 Komentar

Beben Koben

master nih euy yg punya....keren bgt blognya \m/

Unknown

kalo sudah di terangin buat animasinya. . kenapa kotak buat tempat animasi gag di jelasin sih?? haha pelit :D ^^

di tunggu artikel bermanfaat berikutnya .. .

Unknown

Gan saya Pinjem salah satu postingannya, emm tentang blog pager, syarat dan ketentuan sudah aku ikuti, makasih sebelumnya

Taufik Nurrohman

@Bayu: Kalau kotak animasinya dijelasin jadi terlalu detil mas, nanti malah jadi tambah bingung. Emang bikin boks pake CSS apa susahnya?

Unknown

waduh tutorial dasar kok udah mumet begini, cara mengunakannya bagai mana nich maklum newbie om

Anonim

mas boleh minta kode slideshownya g?
sepertinya ini yang aku butuhkan, bisa aku taruh di baca manga online
riquest
tanpa otomatis next image dan sekalian auto size imagenya ya ...

Taufik Nurrohman

@hentaindo team Anda belum beruntung. Sayangnya tidak boleh. Beberapa orang yang mengunjungi blog ini dan berhasil meniru desain Saya lebih suka mencuri dibandingkan meminta T_T

Anonim

@Taufik Nurrohman kalo gitu, riquest slideshow seperti yang aku tulis di atas deh ^_^

shadow

gaaaaan mau tanya dunk
$(sasaran).animate({"properti": "+=N"}, durasi);
tapi pengen di batasin jadi misalnya
var c = 30
$("#box").animate({"left": "+="+c+"px"},"slow");
mau di batasi jika 100 maka gambarnya hilang

Taufik Nurrohman

Cek kondisi elemen sebelum animasi dijalankan:

$('button').click(function() {
if (parseInt($('#box').css('margin-left'), 10) != 100) {
$('#box').stop().animate({'margin-left':"+=10px"}, 600);
} else {
$('#box').hide();
}
});

Komentar telah ditutup.