fungsi animasi tersuai jQuery
Animasi jQuery - kaedah animate()
Kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.
Sintaks:
$(selector).animate({params},speed,callback);Parameter params yang diperlukan mentakrifkan sifat CSS yang membentuk animasi.
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas animasi selesai.
Contoh berikut menunjukkan aplikasi mudah kaedah animate() ia menggerakkan elemen <div> >
Petua: Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan. Jika anda ingin beroperasi pada kedudukan, ingat untuk menetapkan sifat kedudukan CSS elemen kepada relatif, tetap atau mutlak! 
Sila ambil perhatian bahawa berbilang atribut boleh digunakan pada masa yang sama semasa penjanaan animasi:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html> Petua: Anda boleh menggunakan kaedah animate() untuk memanipulasi semua sifat CSS Walau bagaimanapun, terdapat satu perkara penting yang perlu diingat: apabila menggunakan animate(), anda mesti menggunakan Tag unta Semua nama harta tidak boleh ditulis, contohnya, paddingLeft mesti digunakan bukannya padding-left, marginRight mesti digunakan bukannya margin-right, dsb. Selain itu, animasi warna tidak termasuk dalam perpustakaan jQuery teras. Jika anda perlu menjana animasi berwarna, anda perlu memuat turun pemalam Animasi Warna daripada jQuery.com. 
Anda juga boleh menentukan nilai relatif ( nilai adalah relatif kepada nilai semasa unsur). Anda perlu menambah += atau -= di hadapan nilai:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
jQuery animate() - menggunakan nilai pratakrif
Anda juga boleh menghidupkan nilai harta untuk "menunjukkan", "menyembunyikan" atau "menogol":
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery animate() - Menggunakan fungsi baris gilir
Secara lalai, jQuery menyediakan fungsi baris gilir untuk animasi. Ini bermakna jika anda menulis berbilang panggilan animate() selepas satu sama lain, jQuery mencipta baris gilir "dalaman" yang mengandungi panggilan kaedah tersebut. Kemudian jalankan panggilan bernyawa ini satu demi satu.
Contoh: Jika anda ingin melakukan animasi yang berbeza selepas satu sama lain, maka kami ingin memanfaatkan fungsi baris gilir
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
