jQuery Effects - แอนิเมชั่น
ด้วย jQuery คุณสามารถสร้างแอนิเมชั่นแบบกำหนดเองได้
jQuery Animations - วิธีการเคลื่อนไหว ()
วิธี jQuery animate()ใช้เพื่อสร้างภาพเคลื่อนไหวที่กำหนดเอง
ไวยากรณ์:
$(selector).animate({params},speed,callback);
พารามิเตอร์ params ที่กำหนดจะกำหนดคุณสมบัติ CSS ให้เป็นภาพเคลื่อนไหว
พารามิเตอร์ความเร็วที่เป็นตัวเลือกระบุระยะเวลาของเอฟเฟกต์ สามารถใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที
พารามิเตอร์เรียกกลับที่เป็นทางเลือกคือฟังก์ชันที่จะดำเนินการหลังจากภาพเคลื่อนไหวเสร็จสิ้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้animate()วิธีการ อย่างง่าย มันย้าย <div> องค์ประกอบไปทางขวา จนกระทั่งถึงคุณสมบัติด้านซ้าย 250px:
ตัวอย่าง
$("button").click(function(){
$("div").animate({left: '250px'});
});
โดยค่าเริ่มต้น องค์ประกอบ HTML ทั้งหมดมีตำแหน่งคงที่ และไม่สามารถย้ายได้
ในการจัดการตำแหน่ง อย่าลืมตั้งค่าคุณสมบัติตำแหน่ง CSS ขององค์ประกอบเป็นสัมพันธ์ คงที่ หรือแน่นอน!
jQuery animate() - จัดการคุณสมบัติหลายรายการ
ขอให้สังเกตว่าคุณสมบัติหลายรายการสามารถเคลื่อนไหวได้พร้อมกัน:
ตัวอย่าง
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
เป็นไปได้ไหมที่จะจัดการคุณสมบัติ CSS ทั้งหมดด้วยเมธอด animate()
ใช่เกือบ! อย่างไรก็ตาม มีสิ่งสำคัญอย่างหนึ่งที่ต้องจำไว้: ชื่อคุณสมบัติทั้งหมดต้องเป็นตัวพิมพ์อูฐเมื่อใช้กับเมธอด animate() คุณจะต้องเขียน paddingLeft แทน padding-left, marginRight แทนที่จะเป็น margin-right เป็นต้น
นอกจากนี้ แอนิเมชั่นสีไม่รวมอยู่ในไลบรารี jQuery หลัก
หากคุณต้องการทำให้สีเคลื่อนไหว คุณต้องดาวน์โหลด
ปลั๊กอิน Color Animationsจาก jQuery.com
jQuery animate() - การใช้ค่าสัมพัทธ์
นอกจากนี้ยังสามารถกำหนดค่าสัมพัทธ์ได้ (ค่านั้นสัมพันธ์กับค่าปัจจุบันขององค์ประกอบ) ทำได้โดยใส่ += หรือ -= หน้าค่า:
ตัวอย่าง
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - การใช้ค่าที่กำหนดไว้ล่วงหน้า
คุณยังสามารถระบุค่าภาพเคลื่อนไหวของพร็อพเพอร์ตี้เป็น " show", " hide" หรือ " toggle":
ตัวอย่าง
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - ใช้ฟังก์ชันคิว
ตามค่าเริ่มต้น jQuery มาพร้อมกับฟังก์ชันคิวสำหรับแอนิเมชัน
ซึ่งหมายความว่าหากคุณเขียนการanimate()เรียกหลาย ๆ ครั้งติดต่อกัน jQuery จะสร้างคิว "ภายใน" ด้วยการเรียกเมธอดเหล่านี้ จากนั้นจะเรียกใช้การโทรแบบเคลื่อนไหว ONE by ONE
ดังนั้น หากคุณต้องการแสดงแอนิเมชั่นที่แตกต่างกัน เราใช้ประโยชน์จากฟังก์ชันคิว:
ตัวอย่าง 1
$("button").click(function(){
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>องค์ประกอบไปทางขวาก่อน แล้วจึงเพิ่มขนาดแบบอักษรของข้อความ:
ตัวอย่าง 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
แบบฝึกหัด jQuery
การอ้างอิงเอฟเฟกต์ jQuery
สำหรับภาพรวมทั้งหมดของเอฟเฟกต์ jQuery โปรดไปที่jQuery Effect Referenceของเรา