เมธอด animate() ของ jQuery ทำแอนิเมชันแบบกำหนดเอง (custom animations) บนคุณสมบัติ CSS ที่ระบุ มันยอมรับจำนวนอาร์กิวเมนต์ อาร์กิวเมนต์แรกคือออบเจ็กต์ที่มีการเปลี่ยนแปลง CSS ที่จะทำ อาร์กิวเมนต์ที่สองสามารถจัดการหลายตัวเลือกได้ เช่น ระยะเวลา (duration) และฟังก์ชัน callback
มีตัวเลือกจำนวนมากที่พร้อมใช้งานสำหรับ animate() บทนำนี้จะจำกัดเพียงprimer เบื้องต้น เราจะมองที่ไวยากรณ์สำหรับ jQuery animate รวมถึงโค้ดตัวอย่าง โค้ดตัวอย่างของเราจะแสดงวิธีขยาย <div> โดยใช้ animate()
ทำไมต้องใช้ jQuery animate()?
มีกรณีการใช้งาน (use cases) มากมายสำหรับ jQuery animate() เพื่อพูดอย่างง่าย คุณสามารถใช้เมธอดนี้ทุกครั้งที่แอปพลิเคชันของคุณต้องการแอนิเมชันบนฝั่งหน้า (front end) เมธอดนี้ให้โซลูชันที่ไดนามิกและซับซ้อน
แอนิเมชันกลายเป็นแนวทางปฏิบัติมาตรฐานในการพัฒนาฝั่งหน้า ด้วยการฝึกใช้ animate() เพียงพอ คุณจะนำแอนิเมชันไปใช้กับฝั่งหน้าของโปรเจกต์ของคุณในไม่ช้า มาเริ่มต้นด้วยการเรียนรู้ไวยากรณ์บางอย่าง
ไวยากรณ์ jQuery animate()
ตามที่เราพูดสั้นๆ ไป animate() รับอาร์กิวเมนต์ของออบเจ็กต์ CSS นี่คือออบเจ็กต์ที่มีค่าใหม่ของคุณสมบัติ CSS ที่เลือก แนวทางปฏิบัติที่ดีคือใช้ animate() เฉพาะกับองค์ประกอบที่อ้างอิงใน stylesheet
เช่นเดียวกับเมธอด jQuery ทั้งหมด animate() ต้องแนบกับองค์ประกอบที่เลือก จากนั้น เรียก animate() และส่งออบเจ็กต์คุณสมบัติ CSS พร้อมค่าของลักษณะสุดท้ายที่ต้องการ สำคัญที่ต้องกล่าวที่นี่ว่า animate() ทำงานได้เฉพาะกับคุณสมบัติ CSS ที่เป็นตัวเลข (numerical properties) แอตทริบิวต์อย่างสีหรือชนิดฟอนต์จะไม่ถูกอ่านโดย animate()
jQuery animate() ในการทำงาน
มาแยกการอธิบายข้างต้นเป็นโค้ดเพื่อทำให้ชัดเจนขึ้น เริ่มต้นด้วยการแสดงผล HTML พื้นฐานของปุ่มและ <div>
HTML <button id="click">Click Me</button> <div id="block">Watch Me!</div>
ทั้งสององค์ประกอบมีแอตทริบิวต์ id นี่คือสิ่งที่เราจะใช้เพื่อเลือกพวกมันด้วย jQuery ตอนนี้มาเป้ยดูว่าจะจัดสไตล์ <div> อย่างไร เพื่อที่เราจะใช้ animate() ได้
CSS div { background-color: lightblue; width: 100px; border: 1px solid blue; }
ที่นี่ เราจัดสไตล์ <div> ด้วยสีพื้นหลัง ความกว้าง และขอบเล็กน้อย เมื่อเราใช้ jQuery เลือก <div> ของเรา เราสามารถส่ง animate() ออบเจ็กต์ของแอตทริบิวต์ CSS ได้ แอตทริบิวต์เหล่านี้จะสะท้อนการเปลี่ยนแปลงสุดท้ายที่เราต้องการเห็น
$('#click').click(function() { $('#block').animate({ width: '70%', fontSize: '3em', borderWidth: '10px' }) })
หากเราแยกส่วน jQuery เราจะเห็นว่าเราเลือกปุ่มด้วยแอตทริบิวต์ id ของ click จากนั้นเราเรียกเมธอด jQuery click() เพื่อแนบ event handler ที่รอรับการคลิก เมื่อ click() ได้รับ event คลิก มันจะ execute ฟังก์ชัน callback
เพื่อรีเฟรชความจำ ฟังก์ชัน callback คือฟังก์ชันที่ส่งไปให้ฟังก์ชันอื่นซึ่งจะถูก execute ภายหลัง ในกรณีนี้ คือหลังจากตรวจจับ event คลิกแล้ว อ่านเพิ่มเติมเกี่ยวกับ jQuery click() ที่นี่
ต่อไป ภายในฟังก์ชัน callback เราเลือก <div> ของเรา เหมือนกับปุ่มของเรา เราใช้แอตทริบิวต์ id ของ block เพื่อเลือก ตอนนี้เราเรียก animate() บน <div> และส่งออบเจ็กต์ CSS ของเราไป
สังเกตว่า fontSize และ borderWidth แตกต่างจากวิธีประกาศใน CSS นี่คือวิธีที่ jQuery ยอมรับคุณสมบัติ CSS ที่ปกติใช้ hyphen
ค่าในออบเจ็กต์ CSS ของเราคือสิ่งที่เราต้องการให้แสดงผลเมื่อแอนิเมชันเสร็จสิ้น ตอนนี้ เมื่อเราคลิกปุ่ม เราจะเห็น <div> ทำแอนิเมชัน:
มันทำงานแล้ว! เราเห็นเนื้อหาของ <div> ขยายตัวร่วมกันจนถึงค่า CSS ใหม่
สรุป
ใน primer เบื้องต้นนี้สำหรับ jQuery animate() เราเรียนรู้ว่า animate() ทำแอนิเมชันบนออบเจ็กต์ CSS ออบเจ็กต์ CSS นั้นถูกส่งไปยังเมธอดพร้อมค่าการแสดงผลสุดท้าย ควรท่องจำอีกครั้งว่าเฉพาะค่า CSS ที่เป็นตัวเลขเท่านั้นที่จะถูกอ่านโดย animate() คุณสมบัติอย่างสีพื้นหลังและชนิดฟอนต์จะไม่ถูกอ่าน
ยังมีพื้นที่มากที่ต้องครอบคลุมกับ jQuery animate() ดังนั้นเมื่อบทนำนี้เข้าใจได้แล้ว คลิกที่นี่ การอ่านเอกสารทางการและฝึกกับตัวอย่างที่รวมอยู่เป็นแนวทางปฏิบัติที่ดีเสมอ jQuery animate() อาจดูซับซ้อนมากตอนแรก แต่ด้วยการฝึกฝนสม่ำเสมอ คุณจะเชี่ยวชาญแอนิเมชันเร็วกว่าที่คุณคิด!
