วิธี fadeTo

วิธี fadeTo ค่อยๆ เปลี่ยน ความโปร่งใส ขององค์ประกอบไปยังค่าที่กำหนด ใน ช่วงตั้งแต่ 0 ถึง 1

ไวยากรณ์

ระยะเวลาและความโปร่งใสถูกกำหนดใน รูปแบบการใช้งานใด ๆ ของวิธี การเปลี่ยนความโปร่งใสภายในเวลาที่กำหนด 400ms โดยค่าเริ่มต้น:

.fadeTo(ระยะเวลา, ค่าความโปร่งใส);

เวลาสามารถกำหนดได้ไม่เพียงแต่เป็นมิลลิวินาที แต่ยังเป็นคำสำคัญ slow (600ms) และ fast (200ms) โดยค่ามากกว่า จะทำให้แอนิเมชันช้าลง:

.fadeTo('slow' หรือ 'fast', ค่าความโปร่งใส);

ยังสามารถส่งพารามิเตอร์ตัวที่สาม (ไม่บังคับ) เป็น callback function - จะทำงานหลังจาก แอนิเมชันเสร็จสิ้น:

.fadeTo(ระยะเวลา, ค่าความโปร่งใส, [callback function]);

ยังสามารถส่งฟังก์ชัน easing และ callback function (พารามิเตอร์ไม่บังคับ) - จะทำงาน หลังจากแอนิเมชันเสร็จสิ้น:

.fadeTo(ระยะเวลา, ค่าความโปร่งใส, [ฟังก์ชัน easing], [callback function]);

ในตัวอย่างต่อไปนี้ โดยใช้วิธี fadeTo เมื่อกดปุ่ม #hide องค์ประกอบ #test จะถูกซ่อนโดยการลดความโปร่งใส ลงเหลือ 0.5 และเมื่อกด #show - จะแสดง:

<button id="hide">ซ่อน</button>
<button id="show">แสดง</button>
<div id="test"></div>

#test {
	width: 200px;
	height: 200px;
	background: green;
	color: white;
	margin-top: 10px;
}

$('#show').on('click', function() {
	$('#test').fadeTo(1000, 1);
});

$('#hide').on('click', function() {
	$('#test').fadeTo(1000, 0.5);
});