jQuery เคลื่อนไหว ()วิธีการ
ตัวอย่าง
"เคลื่อนไหว" องค์ประกอบโดยเปลี่ยนความสูง:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
ความหมายและการใช้งาน
animate() วิธีการดำเนินการสร้างภาพเคลื่อนไหวที่กำหนดเองของชุดคุณสมบัติ CSS
เมธอดนี้เปลี่ยนองค์ประกอบจากสถานะหนึ่งไปอีกสถานะหนึ่งด้วยสไตล์ CSS ค่าคุณสมบัติ CSS จะค่อยๆ เปลี่ยนแปลงเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว
เฉพาะค่าตัวเลขเท่านั้นที่สามารถเคลื่อนไหวได้ (เช่น "ระยะขอบ:30px") ค่าสตริงไม่สามารถเคลื่อนไหวได้ (เช่น "background-color:red") ยกเว้นสตริง "show", "hide" และ "toggle" ค่าเหล่านี้อนุญาตให้ซ่อนและแสดงองค์ประกอบที่เคลื่อนไหวได้
เคล็ดลับ:ใช้ "+=" หรือ "-=" สำหรับภาพเคลื่อนไหวที่เกี่ยวข้อง
ไวยากรณ์
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
| speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
ไวยากรณ์สำรอง
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
ลองด้วยตัวคุณเอง - ตัวอย่าง
วิธีใช้ animate() กับฟังก์ชันเรียกกลับที่ทำซ้ำแอนิเมชั่น
การใช้ไวยากรณ์สำรองเพื่อระบุรูปแบบและตัวเลือกของแอนิเมชั่นหลายแบบ
วิธีการใช้ animate() เพื่อสร้างแถบความคืบหน้า
วิธีใช้ animate() เพื่อเพิ่มการเลื่อนที่ราบรื่นไปยังลิงก์