animasi jQuery
Kesan jQuery - Animasi
Animasi jQuery - kaedah animate()
kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.
Sintaks:
Definisi parameter params yang diperlukan untuk membentuk CSS animasi harta benda.
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> 250 piksel ke kanan:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance»
Klik Butang "Jalankan contoh" untuk melihat tika dalam talian
Nota: Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan.
Jika anda perlu mengendalikan kedudukan, ingat untuk menetapkan sifat kedudukan CSS elemen kepada relatif, tetap atau mutlak terlebih dahulu!
jQuery animate() - Memanipulasi berbilang atribut
Sila ambil perhatian bahawa berbilang atribut boleh digunakan pada masa yang sama semasa proses penjanaan animasi:
Nota: Bolehkah kaedah animate() digunakan untuk mengendalikan semua sifat CSS?
Ya, hampir! Walau bagaimanapun, terdapat satu perkara penting yang perlu diingat: apabila menggunakan animate(), anda mesti menggunakan notasi Camel untuk menulis semua nama harta, contohnya, anda mesti menggunakan paddingLeft dan bukannya padding-left, gunakan marginRight dan bukannya margin-right, dsb. .
Selain itu, animasi warna tidak termasuk dalam pustaka jQuery teras.
Jika anda perlu menjana animasi berwarna, anda perlu memuat turun pemalam Animasi Warna daripada jquery.com.
jQuery animate() - menggunakan nilai relatif
Ia juga mungkin untuk menentukan nilai relatif (nilai adalah relatif kepada nilai semasa elemen). Anda perlu menambah += atau -= di hadapan nilai:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
jQuery animate() - Gunakan nilai pratakrif
Anda juga boleh menghidupkan nilai harta untuk "tunjukkan", "sembunyikan" atau "togol" :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
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 akan mencipta baris gilir "dalaman" yang mengandungi panggilan kaedah tersebut. Kemudian jalankan panggilan bernyawa ini satu demi satu.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Contoh berikut mengalihkan elemen <div> 100 piksel ke kanan, dan kemudian meningkatkan saiz fon teks:
