Merantai dan Menyusun Animasi
Terokai cara merantai berbilang kaedah animasi dan mengurus baris gilir animasi untuk menghasilkan kesan visual berjujukan serta terselaras bagi antara muka dinamik.
Merantai dan Menyusun Animasi ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Pengenalan kepada Rantaian Animasi
Bayangkan anda mahu sesuatu elemen bergerak, kemudian berubah warna, lalu menghilang secara beransur-ansur. Melakukan semua ini satu demi satu secara manual boleh menjadi sukar!
Rantaian animasi dalam jQuery membolehkan anda memautkan berbilang kaedah animasi. Setiap animasi hanya bermula selepas animasi sebelumnya selesai, lalu menghasilkan kesan yang lancar dan berturutan.
Sintaks Asas Rantaian
Kaedah jQuery sering mengembalikan objek jQuery itu sendiri. Hal ini membolehkan anda memanggil kaedah lain secara langsung pada hasil tersebut, lalu membentuk sebuah 'rantaian'.
Di sini, sebuah kotak bergerak ke kanan, kemudian bergerak ke bawah. Cuba jalankannya!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 1000) // Move right
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Membina Urutan Kompleks
Anda boleh merantaikan banyak kaedah animasi bersama-sama. jQuery secara automatik meletakkan animasi ini ke dalam baris gilir dalaman, bagi memastikan animasi dijalankan mengikut urutan yang anda tentukan.
Hal ini menghasilkan aliran berturutan untuk elemen antara muka pengguna anda. Perhatikan kotak bergerak, kemudian membesar, lalu menghilang secara beransur-ansur!
<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.animate({height: '100px', width: '100px'}, 600)
.animate({opacity: 0.5}, 500)
.animate({top: '100px'}, 700)
.fadeOut(500); // Fades out completely
});
});
</script>
</body>
</html>Cara Baris Gilir Animasi Berfungsi
Apabila anda merantaikan kaedah animasi, jQuery tidak menjalankannya serentak. Sebaliknya, jQuery menambahkannya ke dalam senarai khas yang dipanggil baris gilir animasi (atau baris gilir 'fx').
- Animasi pertama bermula serta-merta.
- Animasi seterusnya menunggu dalam baris gilir.
- Setelah sesuatu animasi selesai, jQuery secara automatik mengambil animasi seterusnya daripada baris gilir dan memulakannya.
Hal ini memastikan animasi anda dijalankan secara berturutan dan boleh dijangka.
Menambah Jeda dengan .delay()
Kadangkala anda memerlukan jeda antara animasi. Kaedah .delay() sangat sesuai untuk tujuan ini! Kaedah ini menjeda pelaksanaan item seterusnya dalam baris gilir animasi untuk tempoh yang ditetapkan.
Kotak itu bergerak, berhenti seketika, kemudian bergerak semula.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: purple;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Animation</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800) // Move right
.delay(1000) // Pause for 1 second
.animate({top: '50px'}, 800); // Move down
});
});
</script>
</body>
</html>Menjalankan Kod Tersuai dalam Baris Gilir
Anda boleh menyisipkan fungsi bukan animasi secara langsung ke dalam baris gilir menggunakan .queue(). Hal ini membolehkan anda melakukan tindakan (seperti menukar teks atau menambah kelas) tepat di antara animasi.
Fungsi tersebut dilaksanakan apabila gilirannya tiba dalam baris gilir. Ingat untuk memanggil next() di dalam fungsi tersuai anda bagi memberitahu jQuery supaya bergerak ke item seterusnya dalam baris gilir!
<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: orange;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<p id="status">Ready</p>
<button id="startAnimation">Start Sequence</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 800)
.queue(function(next) { // Add custom function to queue
$(this).css("background-color", "blue");
$("#status").text("Color changed!");
next(); // Crucial: tells jQuery to proceed
})
.animate({top: '50px'}, 800)
.queue(function(next) {
$("#status").text("Animation done!");
next();
});
});
});
</script>
</body>
</html>Menghentikan Animasi dengan .stop()
Bagaimana jika anda mahu menghentikan animasi di pertengahan? Kaedah .stop() ialah jawapannya. Kaedah ini boleh menghentikan animasi yang sedang berjalan pada sesuatu elemen.
.stop(true): Menghentikan animasi semasa dan mengosongkan seluruh baris gilir animasi..stop(false, true): Menghentikan animasi semasa dan melompat ke keadaan akhirnya, tetapi tidak mengosongkan baris gilir.
Gunakannya dengan berhati-hati kerana kaedah ini boleh mengganggu urutan yang telah anda rancangkan dengan teliti!
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: teal;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop (clear queue)</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 2000)
.animate({top: '100px'}, 2000)
.animate({left: '0px'}, 2000);
});
$("#stopAnimation").on("click", function() {
$("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
});
});
</script>
</body>
</html>Melangkau ke Penghujung Animasi dengan .finish()
Kaedah .finish() ialah cara yang berkuasa untuk melengkapkan semua animasi yang sedang berjalan pada sesuatu elemen dengan serta-merta serta mengosongkan baris gilir animasinya.
- Kaedah ini seperti memanggil
.stop(true, true)pada semua animasi. - Elemen itu terus melompat ke keadaan akhir semua animasi yang beratur.
Kaedah ini berguna untuk butang 'set semula' atau untuk mengalihkan elemen dengan pantas ke keadaan akhir animasinya.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 50px;
height: 50px;
background-color: darkblue;
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Long Chain</button>
<button id="finishAnimation">Finish All</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.animate({left: '150px'}, 3000)
.animate({top: '100px'}, 3000)
.animate({width: '100px'}, 3000);
});
$("#finishAnimation").on("click", function() {
$("#myBox").finish(); // Instantly jump to final state
});
});
</script>
</body>
</html>Merantaikan Pelbagai Kesan
Rantaian bukan hanya untuk .animate()! Anda boleh merantaikan banyak kaedah animasi jQuery lain seperti .fadeIn(), .slideUp(), .slideToggle() dan banyak lagi.
Kaedah ini juga menggunakan baris gilir animasi yang sama, membolehkan anda mencipta urutan visual kompleks dengan mudah.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
width: 80px;
height: 80px;
background-color: #3498db;
margin-bottom: 10px;
display: none; /* Start hidden */
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<button id="startAnimation">Start Mixed Chain</button>
<script>
$(document).ready(function() {
$("#startAnimation").on("click", function() {
$("#myBox")
.fadeIn(500) // Fade in
.delay(500) // Pause
.slideUp(500) // Slide up
.delay(500) // Pause
.slideDown(500) // Slide down
.animate({width: '120px', height: '120px'}, 700); // Grow
});
});
</script>
</body>
</html>Semakan Pantas Rantaian
Pertimbangkan kod jQuery berikut. Apakah keadaan akhir #myBox selepas butang diklik?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#myBox {
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0px;
opacity: 1;
}
</style>
</head>
<body>
<div id="myBox"></div>
<button id="btn">Click Me</button>
<script>
$(document).ready(function() {
$("#btn").on("click", function() {
$("#myBox")
.animate({left: '100px'}, 500)
.delay(500)
.animate({opacity: 0.5}, 500)
.hide(500);
});
});
</script>
</body>
</html>Imbas Kembali: Rantaian dan Baris Gilir
Syabas! Anda telah belajar cara mencipta kesan visual dinamik dan berturutan menggunakan mekanisme rantaian serta baris gilir animasi jQuery.
- Rantaian: Memautkan berbilang kaedah animasi bersama-sama.
- Baris Gilir: jQuery menguruskan animasi dalam satu urutan.
.delay(): Menjeda antara animasi..queue(): Menyisipkan fungsi tersuai ke dalam baris gilir..stop(): Menghentikan atau mengosongkan baris gilir..finish(): Melengkapkan semua animasi yang beratur dengan serta-merta.
Seterusnya, kita akan mendalami pelonggaran tersuai dan panggil balik animasi untuk kawalan yang lebih terperinci!
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Merantai dan Menyusun Animasi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Merantai dan Menyusun Animasi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Merantai dan Menyusun Animasi”?
Terokai cara merantai berbilang kaedah animasi dan mengurus baris gilir animasi untuk menghasilkan kesan visual berjujukan serta terselaras bagi antara muka dinamik. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 3.
Berapa lamakah pelajaran “Merantai dan Menyusun Animasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?
Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Merantai dan Menyusun Animasi
- Pelembutan Tersuai dan Fungsi Panggilan Balik Animasi
- Kesan Togol dan Gelongsor Lanjutan