วิธี fadeToggle

วิธี fadeToggle จะสลับระหว่างการแสดงหรือซ่อนองค์ประกอบอย่างนุ่มนวลตามลำดับ โดยทำแอนิเมชั่นความโปร่งใสของพวกมัน

ไวยากรณ์

แสดง/ซ่อนภายในเวลาที่กำหนด ค่าเริ่มต้นคือ 400ms:

.fadeToggle(ความยาวเวลา);

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

.fadeToggle('slow' หรือ 'fast');

หากไม่ระบุพารามิเตอร์ - จะไม่มีการทำแอนิเมชั่น องค์ประกอบจะ แสดง/ซ่อนทันที:

.fadeToggle();

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

.fadeToggle(ความยาวเวลา, [ฟังก์ชัน easing], [callback ฟังก์ชัน]);

สามารถส่งตัวเลือกต่างๆ ให้กับเมธอดได้ ในรูปแบบของวัตถุ JavaScript ที่มี คู่ key: value:

.fadeToggle(options);

วัตถุดังกล่าวสามารถส่ง พารามิเตอร์และฟังก์ชันต่อไปนี้ - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. คำอธิบาย พารามิเตอร์เหล่านี้คุณสามารถดูได้จากเมธอด animate ตัวอย่างเช่น กำหนดความยาวเวลาและฟังก์ชัน easing:

.fadeToggle( {duration: 800, easing: easeInSine} );

ตัวอย่าง

ในตัวอย่างต่อไปนี้ เมื่อกดปุ่ม #toggle ครั้งแรก องค์ประกอบที่มี #test จะ ถูกซ่อน และเมื่อกดอีกครั้ง - จะถูกแสดง สำหรับ สิ่งนี้เราใช้เมธอด fadeToggle นอกจากนี้ เราจะตั้งค่าความเร็วเป็น 1000ms และ ค่าฟังก์ชัน easing เป็น linear:

<button id="toggle">toggle</button>
<div id="test"></div>

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

$('#toggle').on('click', function() {
	$('#test').fadeToggle(1000, 'linear');
});

ดูเพิ่มเติม

เมธอด slideToggle,
ซึ่งสลับระหว่างการแสดง/ซ่อนองค์ประกอบอย่างนุ่มนวล
เมธอด fadeTo,
ซึ่งเปลี่ยนความโปร่งใสขององค์ประกอบ
เมธอด toggle,
ซึ่งสลับระหว่างการแสดง/ซ่อนองค์ประกอบอย่างนุ่มนวล
เมธอด animate,
ซึ่งทำแอนิเมชั่นคุณสมบัติขององค์ประกอบ