animasi jQuery
JQuery Animation - kaedah animate()
kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.
Sintaks:
$(selector).animate({params},speed,callback);
Diperlukan parameter params 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> 250 piksel ke kanan:
Contoh
<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan program dan cuba
Petua: Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan. Jika kita perlu menukarnya, kita perlu menetapkan atribut kedudukan elemen kepada relatif, tetap atau mutlak!
jQuery animate() - Manipulasi berbilang atribut
Sila ambil perhatian bahawa berbilang atribut boleh digunakan pada masa yang sama semasa penjanaan animasi:
<!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>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan atur cara untuk mencubanya
jQuery animate () - Nilai relatif juga boleh ditakrifkan (nilai adalah relatif kepada nilai semasa elemen) menggunakan nilai relatif
. Anda perlu menambah += atau -= di hadapan nilai:
<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan atur cara untuk mencubanya
jQuery animate() - gunakan pratakrif values
Anda juga boleh menghidupkan nilai harta untuk "tunjukkan", "sembunyikan" atau "togol":
<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan atur cara untuk mencubanya
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.
<!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(){
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");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Jalankan atur cara dan cuba
Contoh berikut mengalihkan elemen <div> ke kanan sebanyak 100 piksel, dan kemudian meningkatkan saiz fon teks:
<!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(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>Jalankan Cuba program
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
