วิธี animate

วิธี animate ช่วยให้สร้าง เอฟเฟกต์อนิเมชั่นสำหรับคุณสมบัติ CSS ต่างๆ ได้ พารามิเตอร์บังคับเพียงอย่างเดียว คือวัตถุที่มีคุณสมบัติ CSS คล้ายกับที่ เราใส่เข้าไปในวิธี css คุณสมบัติหลายอย่างที่มีค่าไม่ใช่ตัวเลขหรือหลายค่า ไม่สามารถสร้างอนิเมชั่นได้ด้วยฟังก์ชันพื้นฐาน ของ jQuery (เช่น background-color) นอกจากนี้ยังไม่ สนับสนุนชื่อย่อของคุณสมบัติ CSS เสมอไป เช่น font - แทนที่จะใช้ fontSize หรือ font-size ได้ สามารถใส่ '+=' หรือ '-=' ข้างหน้าค่าได้ ในกรณีนี้ค่าที่ระบุจะถูกบวกหรือ ลบออกจากค่าปัจจุบันของคุณสมบัตินั้น แทนค่าตัวเลข สามารถใส่ show, hide หรือ toggle ได้ เอฟเฟกต์ทั้งหมดของ jQuery รวมถึง animate สามารถปิดใช้งานได้ทั่วโลก โดยใช้การตั้งค่า jQuery.fx.off = true, ซึ่งกำหนดค่า duration เป็น 0

ไวยากรณ์

พารามิเตอร์แรกของอนิเมชั่นคือวัตถุที่มี คุณสมบัติ CSS และค่าของมันในรูปแบบ คีย์: ค่า ซึ่งเราต้องการ สร้างอนิเมชั่น พารามิเตอร์ที่เหลือถือเป็น ไม่บังคับ พารามิเตอร์ที่สอง - กำหนด ความยาวของอนิเมชั่นในหน่วยมิลลิวินาที ค่าเริ่มต้นคือ 400ms พารามิเตอร์ที่สามคือฟังก์ชัน easing สำหรับการเปลี่ยนผ่าน (ค่าเริ่มต้นคือ swing) และพารามิเตอร์ที่สี่ - ฟังก์ชัน callback ซึ่ง จะทำงานหลังจากอนิเมชั่นดำเนินการเสร็จ:

.animate(properties, [duration ], [easing ], [callback ]);

สามารถกำหนดเวลาไม่ใช่แค่มิลลิวินาทีเท่านั้น แต่ยังใช้คำหลัก slow (600ms) และ fast (200ms) ได้ ยิ่งค่ามาก อนิเมชั่นยิ่งช้าลง สามารถส่งผ่านตัวเลือกต่างๆ ไปยังวิธีเป็นพารามิเตอร์ที่สอง ในรูปแบบของวัตถุ JavaScript ที่มี คู่ คีย์: ค่า:

.animate(properties, options);

ตัวอย่างเช่น ตั้งค่าสำหรับคุณสมบัติ CSS width และ height เป็น toggle กำหนด duration เป็น 5000ms ส่งผ่านฟังก์ชัน easing ในรูปแบบวัตถุ สำหรับความกว้างจะเป็นฟังก์ชันเชิงเส้น และสำหรับ ความสูง - easeOutBounce นอกจากนี้เมื่อ อนิเมชั่นเสร็จสิ้น ฟังก์ชันจะทำงานหนึ่งครั้ง (ดูคีย์ complete) ซึ่งหลังจากองค์ประกอบ #test จะวาง div พร้อมข้อความ 'Animation complete.':

$('#test').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 5000,
	specialEasing: {
		width: 'linear',
		height: 'easeOutBounce'
	},
	complete: function() {
		$(this).after('<div>Animation complete.</div>');
	}
});

ด้านล่างในตารางแสดงคุณสมบัติและวิธี ของวัตถุ options และคำอธิบาย:

ชื่อ	คำอธิบาย
`duration`	ความยาวของอนิเมชั่นในหน่วยมิลลิวินาที - สตริงหรือ ตัวเลข ค่าเริ่มต้นคือ `400ms`
`easing`	กำหนดว่าจะใช้ฟังก์ชัน easing แบบไหน ค่าเริ่มต้นคือ `swing`
`queue`	ค่าบูลีนหรือสตริง ค่าเริ่มต้นคือ `true` ระบุว่าให้ ใส่อนิเมชั่นลงในคิวหรือไม่ ถ้าเป็น `false` อนิเมชั่นจะเริ่มต้นทันที ถ้าส่งพารามิเตอร์ เป็นสตริง อนิเมชั่นจะถูกใส่ลงใน คิวที่แสดงโดยพารามิเตอร์นี้ เมื่อ ใช้คิวพร้อมชื่อที่กำหนดเอง อนิเมชั่นจะไม่เริ่มทำงานอัตโนมัติ หากต้องการ เริ่มใช้งาน - ใช้ `dequeue('queuename')`
`specialEasing`	ที่นี่คุณสามารถส่งผ่านวัตถุ ที่มีคีย์ เป็นคุณสมบัติ CSS และค่าที่เกี่ยวข้อง คือฟังก์ชัน easing
`step`	ฟังก์ชัน ที่ถูกเรียกสำหรับคุณสมบัติที่มีอนิเมชั่นแต่ละอย่าง ของแต่ละองค์ประกอบที่มีอนิเมชั่น ช่วยให้ ปรับเปลี่ยนวัตถุ `Tween` เพื่อเปลี่ยนค่า ของคุณสมบัติก่อนที่จะถูกตั้งค่า รับ พารามิเตอร์คือค่าปัจจุบันของ `tween` และวัตถุ `Tween`
`progress`	ฟังก์ชัน ที่ถูกเรียกหลังจากแต่ละขั้นตอนของอนิเมชั่น เพียงครั้งเดียวต่อองค์ประกอบ โดยไม่ขึ้นกับ จำนวนคุณสมบัติที่มีอนิเมชั่น ฟังก์ชันรับ พารามิเตอร์สามตัว `animation` (ในรูปแบบ promise) `progress` (ตัวเลขตั้งแต่ `0` ถึง `1`) และ `remainingMs` (จำนวนมิลลิวินาทีที่เหลือ)
`complete`	ฟังก์ชัน ที่ถูกเรียกหนึ่งครั้งหลังจากสิ้นสุด อนิเมชั่นขององค์ประกอบ ฟังก์ชันรับ `animation` (ในรูปแบบ promise)
`start`	ฟังก์ชัน ที่ถูกเรียก เมื่ออนิเมชั่น ขององค์ประกอบเริ่มต้น ฟังก์ชันรับ `animation` (ในรูปแบบ promise) และ `jumpedToEnd` (ค่าบูลีน ถ้า `true` แสดงว่าอนิเมชั่นจะเสร็จสิ้น โดยอัตโนมัติ)
`done`	ฟังก์ชัน ที่ถูกเรียก เมื่ออนิเมชั่น ขององค์ประกอบสิ้นสุด (promise ของมันสำเร็จ) ฟังก์ชันรับ `animation` (ในรูปแบบ promise) และ `jumpedToEnd` (ค่าบูลีน ถ้า `true` แสดงว่าอนิเมชั่นจะเสร็จสิ้น โดยอัตโนมัติ)
`fail`	ฟังก์ชัน ที่ถูกเรียก เมื่ออนิเมชั่น ขององค์ประกอบสิ้นสุดด้วยข้อผิดพลาด (promise ของมันสำเร็จด้วยข้อผิดพลาด) ฟังก์ชันรับ `animation` (ในรูปแบบ promise) และ `jumpedToEnd` (ค่าบูลีน ถ้า `true` แสดงว่าอนิเมชั่นจะเสร็จสิ้น โดยอัตโนมัติ)
`always`	ฟังก์ชัน ที่ถูกเรียก เมื่ออนิเมชั่น ขององค์ประกอบสิ้นสุดหรือหยุดโดยไม่ สิ้นสุด (promise ของมันสำเร็จหรือด้วย ข้อผิดพลาด) ฟังก์ชันรับ `animation` (ในรูปแบบ promise) และ `jumpedToEnd` (ค่าบูลีน ถ้า `true` แสดงว่าอนิเมชั่นจะเสร็จสิ้น โดยอัตโนมัติ)

ตัวอย่าง

เมื่อคลิกปุ่ม #left ให้ เลื่อนสี่เหลี่ยมสีเขียวไปทางซ้าย และปุ่ม #right ไปทางขวาเป็นระยะ 50px และตั้ง duration เป็น 600ms - ด้วยคำสั่ง slow:

<button id="left">ซ้าย</button>
<button id="right">ขวา</button>
<div class="block"></div>

div {
	position: absolute;
	background-color: green;
	left: 50px;
	width: 100px;
	height: 100px;
	margin: 5px;
}

$('#right').click(function() {
	$('.block').animate({'left': '+=50px'}, 'slow');
});
	
$('#left').click(function() {
	$('.block').animate({'left': '-=50px'}, 'slow');
});

ดูเพิ่มเติม

วิธี show
ซึ่งแสดงองค์ประกอบอย่างลื่นไหล
วิธี stop
ซึ่งช่วยหยุดอนิเมชั่นที่กำลังทำงาน
วิธี delay
ซึ่งกำหนดความล่าช้าในการดำเนินการของเหตุการณ์
คุณสมบัติ jQuery.fx.off
ซึ่งช่วยปิดอนิเมชั่นได้ทั่วโลก
ซีเลกเตอร์ animated
ซึ่งเลือกองค์ประกอบที่กำลัง มีส่วนร่วมในอนิเมชั่นในขณะนั้น