ตัวอย่าง
"ภาพเคลื่อนไหว" องค์ประกอบโดยการเปลี่ยนความสูง:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
ลองตัวเอง» ความหมายและการใช้งาน
animate() วิธีการดำเนินการเคลื่อนไหวแบบกำหนดเองชุดของคุณสมบัติ CSS
วิธีการนี้จะเปลี่ยนองค์ประกอบจากรัฐหนึ่งไปยังอีกที่มีรูปแบบ CSS ค่าคุณสมบัติ CSS เป็นค่อยๆเปลี่ยนเพื่อสร้างผลภาพเคลื่อนไหว
ค่าตัวเลขเท่านั้นสามารถเคลื่อนไหว (เช่น "margin:30px" ) ค่าสตริงไม่สามารถเคลื่อนไหว (เช่น "background-color:red" ) ยกเว้นสำหรับสตริง "show", "hide" และ "toggle" ค่าเหล่านี้ช่วยให้การซ่อนและแสดงให้เห็นถึงองค์ประกอบภาพเคลื่อนไหว
เคล็ดลับ: ใช้ "+=" "-=" "+=" "-=" สำหรับภาพเคลื่อนไหวญาติ
วากยสัมพันธ์
(selector).animate({styles},speed,easing,callback)| พารามิเตอร์ | ลักษณะ |
|---|---|
| styles | จำเป็นต้องใช้ ระบุหนึ่งหรือ CSS คุณสมบัติเพิ่มเติม / ค่าในการเคลื่อนไหว หมายเหตุ: ชื่อสถานที่ให้บริการจะต้องเป็นอูฐดาดเมื่อใช้ร่วมกับ animate() วิธีการ: คุณจะต้องเขียน paddingLeft แทน padding ซ้าย marginRight แทนขอบขวาและอื่น ๆ คุณสมบัติที่สามารถเคลื่อนไหว:
ค่าตัวเลขเท่านั้นสามารถเคลื่อนไหว (เช่น "margin:30px" ) ค่าสตริงไม่สามารถเคลื่อนไหว (เช่น "background-color:red" ) ยกเว้นสำหรับสตริง "show", "hide" และ "toggle" ค่าเหล่านี้ช่วยให้การซ่อนและแสดงให้เห็นถึงองค์ประกอบภาพเคลื่อนไหว เคล็ดลับ: ภาพเคลื่อนไหวสีจะไม่รวมอยู่ในห้องสมุดหลัก jQueryหากคุณต้องการให้เคลื่อนไหวสีคุณต้องดาวน์โหลด ปลั๊กอินสีภาพเคลื่อนไหว จาก jQuery.com |
| speed | ไม่จำเป็น ระบุความเร็วของภาพเคลื่อนไหว ค่าเริ่มต้นคือ 400 มิลลิวินาที ค่าที่เป็นไปได้:
|
| easing | ไม่จำเป็น ระบุความเร็วขององค์ประกอบในจุดแตกต่างของภาพเคลื่อนไหว ค่าเริ่มต้นคือ "swing" ค่าที่เป็นไปได้:
|
| callback | ไม่จำเป็น ฟังก์ชั่นที่จะดำเนินการหลังจากที่เสร็จสิ้นการเคลื่อนไหว เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการเรียกกลับโปรดอ่าน jQuery โทรกลับ บท |
สลับไวยากรณ์
(selector).animate({styles},{options})| พารามิเตอร์ | ลักษณะ |
|---|---|
| styles | จำเป็นต้องใช้ ระบุหนึ่งหรือ CSS คุณสมบัติเพิ่มเติม / ค่าการเคลื่อนไหว (ดูค่าที่เป็นไปด้านบน) |
| options | ไม่จำเป็น ระบุตัวเลือกเพิ่มเติมสำหรับการเคลื่อนไหว ค่าที่เป็นไปได้:
|
ลองตัวเอง - ตัวอย่าง
การใช้ animate() ที่มีฟังก์ชั่นการติดต่อกลับ
วิธีการใช้ animate() ที่มีฟังก์ชั่นการโทรกลับที่ซ้ำภาพเคลื่อนไหว
สลับตัวอย่างไวยากรณ์
โดยใช้ไวยากรณ์อื่นเพื่อระบุรูปแบบภาพเคลื่อนไหวและตัวเลือกหลาย
การใช้ animate() เพื่อสร้างแถบความคืบหน้า
วิธีการใช้ animate() วิธีการที่จะสร้างแถบความคืบหน้า
เพิ่มการเลื่อนเรียบเพื่อเบรกหน้า
วิธีการใช้ animate() เพื่อเพิ่มการเลื่อนเรียบเพื่อการเชื่อมโยง