Efek jQuery - Animate

Method jQuery animate() memungkinkan Anda membuat animasi yang disesuaikan.

Pertunjukan efek



jQuery

jQuery Animasi - Method animate()

Method jQuery animate() digunakan untuk membuat animasi yang disesuaikan.

Sintaks:

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

Diperlukan params Parameter menentukan properti CSS yang akan digunakan untuk animasi.

Pilihan speed Parameter menentukan lama efek. Ini boleh diambil nilai: "slow", "fast", atau dalam milidetik.

Pilihan callback Parameter adalah nama fungsi yang akan dijalankan setelah animasi selesai.

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

Contoh

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

coba sendiri

Petikan:Secara default, semua elemen HTML mempunyai posisi statis dan tidak dapat dipindahkan.

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

jQuery animate() - mengoperasikan beberapa properti

Perhatikan, dalam proses pembuatan animasi, boleh digunakan beberapa properti sekaligus:

Contoh

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

coba sendiri

Petikan:boleh gunakan method animate() untuk mengoperasikan semua properti CSS?

Ya, hampir boleh! Namun, perlu ingat hal penting: ketika menggunakan animate(), harus menggunakan penanda Camel untuk semua nama properti, seperti, harus menggunakan paddingLeft bukannya padding-left, menggunakan 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

Anda juga dapat menetapkan nilai yang relatif (nilai ini berdasarkan nilai elemen saat ini). Perlu ditambahkan += atau -= di depan nilai.

Contoh

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

coba sendiri

jQuery animate() - Menggunakan nilai yang diatur 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 metode ini. kemudian menjalankan 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 menaikkan ukuran teks:

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

coba sendiri