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?

  • Taufik Nurrohman

    @Zh!nTho: Oke..

  • 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 ^_^

  • Taufik Nurrohman

    @hentaindo team Itu Nivo Slider yang sudah dimodifikasi.

  • 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.