jQuery Academy · บทเรียน

การต่อและจัดคิวภาพเคลื่อนไหว

สำรวจวิธีต่อเมธอดภาพเคลื่อนไหวหลายรายการและจัดการคิวภาพเคลื่อนไหว เพื่อสร้างเอฟเฟกต์ภาพที่ต่อเนื่องและประสานกันสำหรับส่วนติดต่อแบบไดนามิก

การต่อและจัดคิวภาพเคลื่อนไหว เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำสู่การเชื่อมต่อแอนิเมชัน

ลองนึกภาพว่าคุณต้องการให้องค์ประกอบเคลื่อนที่ จากนั้นเปลี่ยนสี แล้วค่อย ๆ จางหายไป การทำสิ่งเหล่านี้ทีละอย่างด้วยตนเองอาจยุ่งยาก!

การเชื่อมต่อแอนิเมชันใน jQuery ช่วยให้คุณเชื่อมโยงเมธอดแอนิเมชันหลายรายการเข้าด้วยกัน แอนิเมชันแต่ละรายการจะเริ่มขึ้นหลังจากรายการก่อนหน้าเสร็จสมบูรณ์ ทำให้เกิดเอฟเฟกต์ที่ต่อเนื่องและราบรื่น

ไวยากรณ์พื้นฐานของการเชื่อมต่อ

เมธอดของ jQuery มักส่งคืนออบเจ็กต์ jQuery เอง ทำให้คุณเรียกใช้เมธอดอื่นต่อจากผลลัพธ์ได้โดยตรง และเกิดเป็น “สายโซ่”

ในที่นี้ กล่องจะเคลื่อนไปทางขวา แล้วเคลื่อนลงด้านล่าง ลองเรียกใช้ดู!

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

การสร้างลำดับที่ซับซ้อน

คุณสามารถเชื่อมต่อเมธอดแอนิเมชันหลายรายการเข้าด้วยกันได้ jQuery จะจัดแอนิเมชันเหล่านี้ลงในคิวภายในโดยอัตโนมัติ เพื่อให้แน่ใจว่าแอนิเมชันจะทำงานตามลำดับที่คุณกำหนด

วิธีนี้จะสร้างการไหลแบบต่อเนื่องสำหรับองค์ประกอบส่วนติดต่อผู้ใช้ของคุณ ลองดูการเคลื่อนที่ การขยายขนาด และการจางหายของกล่อง!

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

คิวแอนิเมชันทำงานอย่างไร

เมื่อคุณเชื่อมต่อเมธอดแอนิเมชัน jQuery จะไม่เรียกใช้ทั้งหมดพร้อมกัน แต่จะเพิ่มเมธอดเหล่านั้นลงในรายการพิเศษที่เรียกว่า คิวแอนิเมชัน หรือคิว “fx”

แอนิเมชันแรกจะเริ่มทำงานทันที
แอนิเมชันถัดไปจะรออยู่ในคิว
เมื่อแอนิเมชันหนึ่งเสร็จสิ้น jQuery จะนำรายการถัดไปจากคิวมาเริ่มทำงานโดยอัตโนมัติ

วิธีนี้ช่วยให้แอนิเมชันทำงานตามลำดับและคาดเดาได้

การเพิ่มช่วงหยุดด้วย .delay()

บางครั้งคุณจำเป็นต้องหยุดพักระหว่างแอนิเมชัน เมธอด .delay() เหมาะอย่างยิ่งสำหรับงานนี้ โดยจะหยุดการทำงานของรายการถัดไปในคิวแอนิเมชันตามระยะเวลาที่กำหนด

กล่องจะเคลื่อนที่ หยุดพัก แล้วเคลื่อนที่อีกครั้ง

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

การเรียกใช้โค้ดแบบกำหนดเองในคิว

คุณสามารถแทรกฟังก์ชันที่ไม่ใช่แอนิเมชันลงในคิวได้โดยตรงด้วย .queue() วิธีนี้ช่วยให้คุณดำเนินการต่าง ๆ เช่น เปลี่ยนข้อความหรือเพิ่มคลาส ได้ตรงระหว่างแอนิเมชัน

ฟังก์ชันจะถูกเรียกใช้เมื่อถึงลำดับของมันในคิว อย่าลืมเรียก next() ภายในฟังก์ชันแบบกำหนดเอง เพื่อบอก jQuery ให้ไปยังรายการถัดไปในคิว!

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

การขัดจังหวะแอนิเมชันด้วย .stop()

หากคุณต้องการหยุดแอนิเมชันระหว่างที่กำลังทำงานอยู่จะทำอย่างไร เมธอด .stop() คือคำตอบ เมธอดนี้สามารถหยุดแอนิเมชันที่กำลังทำงานอยู่บนองค์ประกอบได้

.stop(true): หยุดแอนิเมชันปัจจุบันและล้างคิวแอนิเมชันทั้งหมด
.stop(false, true): หยุดแอนิเมชันปัจจุบันและข้ามไปยังสถานะสิ้นสุด แต่จะไม่ล้างคิว

โปรดใช้อย่างระมัดระวัง เพราะอาจรบกวนลำดับที่คุณวางแผนไว้อย่างรอบคอบ!

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

ข้ามไปยังจุดสิ้นสุดของแอนิเมชันด้วย .finish()

เมธอด .finish() เป็นวิธีที่ทรงพลังในการทำให้แอนิเมชันทั้งหมดที่กำลังทำงานอยู่บนองค์ประกอบเสร็จสมบูรณ์ทันที และล้างคิวแอนิเมชันขององค์ประกอบนั้น

การทำงานคล้ายกับการเรียก .stop(true, true) กับแอนิเมชันทั้งหมด
องค์ประกอบจะข้ามไปยังสถานะสุดท้ายของแอนิเมชันทั้งหมดในคิวทันที

วิธีนี้มีประโยชน์สำหรับปุ่ม “รีเซ็ต” หรือการเปลี่ยนองค์ประกอบไปยังสถานะแอนิเมชันสุดท้ายอย่างรวดเร็ว

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

การเชื่อมต่อเอฟเฟกต์ต่าง ๆ

การเชื่อมต่อไม่ได้จำกัดอยู่แค่ .animate() เท่านั้น! คุณสามารถเชื่อมต่อเมธอดแอนิเมชันอื่น ๆ ของ jQuery ได้อีกมากมาย เช่น .fadeIn(), .slideUp(), .slideToggle() และอื่น ๆ

เมธอดเหล่านี้ใช้คิวแอนิเมชันเดียวกัน จึงช่วยให้คุณสร้างลำดับภาพที่ซับซ้อนได้อย่างง่ายดาย

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

ตรวจสอบการเชื่อมต่ออย่างรวดเร็ว

พิจารณาโค้ด jQuery ต่อไปนี้ หลังจากคลิกปุ่มแล้ว #myBox จะมีสถานะสุดท้ายเป็นอย่างไร

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

ทบทวน: การเชื่อมต่อและคิว

ทำได้ดีมากครับ/ค่ะ! คุณได้เรียนรู้วิธีสร้างเอฟเฟกต์ภาพแบบไดนามิกและต่อเนื่องด้วยกลไกการเชื่อมต่อแอนิเมชันและการจัดคิวของ jQuery แล้ว

การเชื่อมต่อ: เชื่อมโยงเมธอดแอนิเมชันหลายรายการเข้าด้วยกัน
คิว: jQuery จัดการแอนิเมชันตามลำดับ
.delay(): หยุดพักระหว่างแอนิเมชัน
.queue(): แทรกฟังก์ชันแบบกำหนดเองลงในคิว
.stop(): ขัดจังหวะหรือล้างคิว
.finish(): ทำให้แอนิเมชันทั้งหมดในคิวเสร็จสมบูรณ์ทันที

ถัดไป เราจะเจาะลึกเรื่องการปรับความนุ่มนวลแบบกำหนดเองและการเรียกกลับของแอนิเมชัน เพื่อควบคุมการทำงานได้ละเอียดยิ่งขึ้น!

คำถามที่พบบ่อย

บทเรียน “การต่อและจัดคิวภาพเคลื่อนไหว” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การต่อและจัดคิวภาพเคลื่อนไหว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การต่อและจัดคิวภาพเคลื่อนไหว”

สำรวจวิธีต่อเมธอดภาพเคลื่อนไหวหลายรายการและจัดการคิวภาพเคลื่อนไหว เพื่อสร้างเอฟเฟกต์ภาพที่ต่อเนื่องและประสานกันสำหรับส่วนติดต่อแบบไดนามิก คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การต่อและจัดคิวภาพเคลื่อนไหว” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การต่อและจัดคิวภาพเคลื่อนไหว
การปรับความนุ่มนวลและการเรียกกลับของภาพเคลื่อนไหวแบบกำหนดเอง
เอฟเฟกต์สลับและเลื่อนขั้นสูง

← กลับไปที่ jQuery Academy