0Pricing
jQuery Academy · Pelajaran

Merangkai dan Mengantrikan Animasi

Jelajahi cara merangkai beberapa metode animasi dan mengelola antrean animasi untuk membuat efek visual berurutan dan terkoordinasi pada antarmuka dinamis.

Merangkai dan Mengantrikan Animasi adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Pengantar Perangkaian Animasi

Bayangkan Anda ingin sebuah elemen bergerak, lalu berubah warna, kemudian memudar. Melakukannya satu per satu secara manual dapat menjadi rumit!

Perangkaian animasi dalam jQuery memungkinkan Anda menghubungkan beberapa metode animasi. Setiap animasi hanya dimulai setelah animasi sebelumnya selesai, sehingga menghasilkan efek yang mulus dan berurutan.

Sintaks Dasar Perangkaian

Metode jQuery sering kali mengembalikan objek jQuery itu sendiri. Hal ini memungkinkan Anda memanggil metode lain secara langsung pada hasilnya, sehingga membentuk sebuah "rantai".

Di sini, sebuah kotak bergerak ke kanan, lalu bergerak ke bawah. Coba jalankan!

<!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>

Membangun Urutan yang Kompleks

Anda dapat merangkai banyak metode animasi. jQuery secara otomatis menempatkan animasi tersebut ke dalam queue internal, sehingga memastikan animasi berjalan sesuai urutan yang Anda tentukan.

Hal ini menciptakan alur berurutan untuk elemen UI Anda. Saksikan kotak bergerak, lalu membesar, kemudian memudar!

<!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 Kerja Animation Queue

Ketika Anda merangkai metode animasi, jQuery tidak menjalankannya sekaligus. Sebagai gantinya, jQuery menambahkannya ke daftar khusus yang disebut animation queue (atau queue "fx").

  • Animasi pertama segera dimulai.
  • Animasi berikutnya menunggu di queue.
  • Setelah sebuah animasi selesai, jQuery secara otomatis mengambil animasi berikutnya dari queue dan memulainya.

Hal ini memastikan animasi Anda berjalan secara berurutan dan dapat diprediksi.

Menambahkan Jeda dengan .delay()

Terkadang Anda memerlukan jeda di antara animasi. Metode .delay() sangat cocok untuk ini! Metode tersebut menjeda eksekusi item berikutnya dalam animation queue selama durasi yang ditentukan.

Kotak bergerak, berhenti sejenak, lalu bergerak lagi.

<!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 Kode Kustom dalam Queue

Anda dapat menyisipkan fungsi nonanimasi langsung ke dalam queue menggunakan .queue(). Dengan demikian, Anda dapat melakukan tindakan (seperti mengubah teks atau menambahkan class) tepat di antara animasi.

Fungsi tersebut dijalankan ketika gilirannya tiba dalam queue. Ingatlah untuk memanggil next() di dalam fungsi kustom Anda agar jQuery melanjutkan ke item berikutnya dalam queue!

<!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>

Menginterupsi Animasi dengan .stop()

Bagaimana jika Anda ingin menghentikan animasi di tengah jalan? Metode .stop() adalah jawabannya. Metode ini dapat menghentikan animasi yang sedang berjalan pada sebuah elemen.

  • .stop(true): Menghentikan animasi saat ini dan menghapus seluruh animation queue.
  • .stop(false, true): Menghentikan animasi saat ini dan langsung membawanya ke keadaan akhir, tetapi tidak menghapus queue.

Gunakan dengan hati-hati karena metode ini dapat mengganggu urutan yang telah Anda rencanakan dengan saksama!

<!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>

Melompat ke Akhir Animasi dengan .finish()

Metode .finish() adalah cara ampuh untuk segera menyelesaikan semua animasi yang sedang berjalan pada sebuah elemen dan menghapus animation queue-nya.

  • Metode ini seperti memanggil .stop(true, true) pada semua animasi.
  • Elemen tersebut langsung melompat ke keadaan akhir dari semua animasi yang ada dalam queue.

Hal ini berguna untuk tombol "atur ulang" atau untuk dengan cepat memindahkan elemen ke keadaan animasi akhirnya.

<!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>

Merangkai Berbagai Efek

Perangkaian bukan hanya untuk .animate()! Anda dapat merangkai banyak metode animasi jQuery lainnya, seperti .fadeIn(), .slideUp(), .slideToggle(), dan lainnya.

Metode-metode ini juga menggunakan animation queue yang sama, sehingga Anda dapat membuat urutan visual yang 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>

Pemeriksaan Singkat Perangkaian

Perhatikan kode jQuery berikut. Bagaimanakah keadaan akhir #myBox setelah tombol 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>

Ringkasan: Perangkaian & Queue

Kerja bagus! Anda telah mempelajari cara membuat efek visual dinamis dan berurutan menggunakan perangkaian animasi dan mekanisme queue jQuery.

  • Perangkaian: Menghubungkan beberapa metode animasi.
  • Queue: jQuery mengelola animasi dalam sebuah urutan.
  • .delay(): Menjeda di antara animasi.
  • .queue(): Menyisipkan fungsi kustom ke dalam queue.
  • .stop(): Menginterupsi atau menghapus queue.
  • .finish(): Segera menyelesaikan semua animasi dalam queue.

Selanjutnya, kita akan membahas easing kustom dan callback animasi untuk kendali yang lebih mendetail!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Merangkai dan Mengantrikan Animasi” gratis?

Ya — teks lengkap “Merangkai dan Mengantrikan Animasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Merangkai dan Mengantrikan Animasi”?

Jelajahi cara merangkai beberapa metode animasi dan mengelola antrean animasi untuk membuat efek visual berurutan dan terkoordinasi pada antarmuka dinamis. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Merangkai dan Mengantrikan Animasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Merangkai dan Mengantrikan Animasi
  2. Easing Kustom dan Callback Animasi
  3. Efek Toggle dan Slide Tingkat Lanjut
← Kembali ke jQuery Academy