ผลกระทบ jQuery - นิเมชั่น
jQuery เคลื่อนไหว () วิธีการช่วยให้คุณสามารถสร้างภาพเคลื่อนไหวแบบกำหนดเอง
jQuery ภาพเคลื่อนไหว - ภาพเคลื่อนไหว () วิธีการ
jQuery เคลื่อนไหว (วิธีการ) จะใช้ในการสร้างภาพเคลื่อนไหวแบบกำหนดเอง
ไวยากรณ์:
พารามิเตอร์ที่จำเป็น params กำหนดรูปแบบของภาพเคลื่อนไหวคุณสมบัติของ CSS
พารามิเตอร์ตัวเลือกความเร็วในการระบุระยะเวลาของผลกระทบที่ มันอาจจะใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที
พารามิเตอร์ตัวเลือกการเรียกกลับเป็นชื่อของฟังก์ชั่นการดำเนินการหลังจากเสร็จสิ้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงโปรแกรมที่ง่ายเคลื่อนไหว () วิธีการ มัน <div> ไปทางขวาเพื่อย้าย 250 พิกเซล
 | โดยค่าเริ่มต้นองค์ประกอบ HTML ทั้งหมดมีตำแหน่งที่คงที่และไม่สามารถเคลื่อนย้าย สำหรับตำแหน่งปฏิบัติการจำแรกองค์ประกอบ CSS ตำแหน่งแอตทริบิวต์การตั้งค่าให้ญาติคงที่หรือแน่นอน! |
|---|
jQuery เคลื่อนไหว () ปฏิบัติการ - คุณสมบัติหลาย
โปรดทราบว่ากระบวนการของการสร้างภาพเคลื่อนไหวสามารถใช้คุณสมบัติหลาย
ตัวอย่าง
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
ลอง»
| คุณสามารถเคลื่อนไหว () วิธีการใช้งานคุณลักษณะ CSS ทั้งหมดหรือไม่ ใช่เกือบ! แต่สิ่งสำคัญที่ต้องจำ: เมื่อใช้ชีวิต () เขียนทั้งหมดชื่อแอตทริบิวต์ต้องใช้สัญกรณ์อูฐ, ตัวอย่างเช่นจะต้องนำมาใช้แทน paddingLeft padding ซ้ายแทนการใช้ marginRight ขอบขวา ฯลฯ . ในเวลาเดียวกัน, ภาพเคลื่อนไหวสีจะไม่รวมอยู่ในห้องสมุดหลัก jQuery หากคุณจำเป็นต้องสร้างภาพเคลื่อนไหวสีที่คุณต้อง jquery.com ดาวน์โหลด สีภาพเคลื่อนไหว ปลั๊กอิน |
|---|
jQuery เคลื่อนไหว () - ใช้ค่าญาติ
นอกจากนี้คุณยังสามารถกำหนดค่าสัมพัทธ์ (ค่าเมื่อเทียบกับค่าปัจจุบันขององค์ประกอบ) จำเป็นที่จะต้องนำหน้าค่ากับ + = หรือ -:
ตัวอย่าง
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
ลอง»
() เคลื่อนไหว JQuery - ใช้ค่าที่กำหนดไว้ล่วงหน้า
คุณยังสามารถใส่ค่าของการเคลื่อนไหวคุณสมบัติการ "โชว์", "ซ่อน" หรือ "สลับ" ที่:
jQuery เคลื่อนไหว () - การใช้ฟังก์ชั่นคิว
โดยค่าเริ่มต้น jQuery ให้ความสามารถในการจัดคิวสำหรับการเคลื่อนไหว
ซึ่งหมายความว่าถ้าคุณเขียนมากกว่าหนึ่งหลังจากที่อื่นเคลื่อนไหว () โทร jQuery จะสร้างเรียกวิธีการเหล่านี้คิว "ภายใน" จากนั้นหนึ่งโดยหนึ่งในการทำงานเหล่านี้เคลื่อนไหวโทร
ตัวอย่างที่ 1
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
ลอง»
ตัวอย่างต่อไปนี้ของ <div> จะถูกย้ายไปขวา 100 พิกเซล, และจากนั้นเพิ่มขนาดของข้อความ:
ตัวอย่างที่ 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
ลอง»