Efek jQuery - Animate

Method animate() jQuery memungkinkan Anda membuat animasi kustom.

Pertunjukan efek



jQuery

jQuery Animaasi - Method animate()

Method animate() jQuery digunakan untuk membuat animasi kustom.

Syarat:

$(selector).animate({params},speed,callback);

Wajib params Parameter menentukan properti CSS yang digunakan untuk animasi.

Opsional speed Parameter menentukan lama efek. Ini dapat diambil berikut ini: "slow", "fast", atau dalam milidetik.

Opsional callback Parameter adalah nama fungsi yang dieksekusi setelah animasi selesai.

Contoh di bawah ini menunjukkan aplikasi sederhana method animate(); ia memindahkan elemen <div> ke kiri hingga properti left mencapai 250 pixel:

Contoh

$("button").click(function(){
  $("div").animate({left:'250px'});
});

Coba sendiri

Petunjuk:Secara default, semua elemen HTML memiliki posisi statis dan tak dapat dipindahkan.

Untuk mengoperasikan posisi, ingat untuk pertama-tama atur properti CSS position elemen menjadi relative, fixed, atau absolute!

jQuery animate() - mengoperasikan berbagai properti

Perhatikan, selama proses pembuatan animasi dapat digunakan berbagai properti:

Contoh

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

Coba sendiri

Petunjuk:Dapatkah method animate() mengoperasikan semua properti CSS?

Ya, hampir saja! Namun, perlu ingat hal penting: ketika menggunakan animate(), harus menggunakan penanda Camel untuk menulis semua nama properti, seperti, harus menggunakan paddingLeft bukannya padding-left, marginRight bukannya margin-right, dan sebagainya.

Pada saat yang sama, animasi warna tidak termasuk dalam pustaka jQuery inti.

Jika perlu menghasilkan animasi warna, Anda perlu mengunduh plugin Color Animations dari jQuery.com.

jQuery animate() - Menggunakan nilai relatif

Juga dapat menetapkan nilai yang relatif (nilai ini berdasarkan nilai saat ini elemen). Harus ditambahkan += atau -= di depan nilai:

Contoh

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Coba sendiri

jQuery animate() - Menggunakan nilai yang ditetapkan sebelumnya

Anda bahkan dapat menetapkan nilai animasi atribut menjadi "show", "hide", atau "toggle":

Contoh

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Coba sendiri

jQuery animate() - Menggunakan fungsi antrian

Secara default, jQuery menyediakan fungsi antrian untuk animasi.

Artinya, jika Anda menulis beberapa panggilan animate() sebelumnya, jQuery akan membuat "antrian internal" yang mengandung panggilan method ini. Lalu jalankan panggilan animate ini secara berturut-turut.

Contoh 1

Sembunyikan, jika Anda ingin melaksanakan animasi yang berbeda setelah masing-masing, maka kita harus menggunakan fungsi antrian:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

Coba sendiri

Contoh 2

Contoh di bawah ini menggerakkan elemen <div> ke kanan, lalu meningkatkan ukuran teksnya:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

Coba sendiri