เมธอด fadeIn

เมธอด fadeIn แสดงองค์ประกอบที่ซ่อนอยู่ อย่างราบรื่น โดยทำให้ไม่โปร่งแสง การซ่อน องค์ประกอบสามารถทำได้ด้วยเมธอด fadeOut, โดยทำให้โปร่งใส

ไวยากรณ์

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

.fadeIn(ระยะเวลา);

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

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

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

.fadeIn();

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

.fadeIn(ระยะเวลา, [ฟังก์ชัน easing], [callback-ฟังก์ชัน]);

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

.fadeIn(options);

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

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

ตัวอย่าง

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

<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').fadeIn(1000);
});

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

ตัวอย่าง

และในตัวอย่างต่อไปนี้ หลังจาก แอนิเมชันเสร็จสิ้นเมื่อแสดงองค์ประกอบ #test เรา จะแสดงข้อความ ด้วยข้อความ '!' และเมื่อซ่อน ด้วยข้อความ '?':

<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').fadeIn(1000, function() {
		alert('!');
	});
});

$('#hide').on('click', function() {
	$('#test').fadeOut(1000, function() {
		alert('?');
	});
});

ดูเพิ่มเติม

เมธอด fadeOut,
ซึ่งซ่อนองค์ประกอบอย่างราบรื่น โดยทำให้โปร่งใส
เมธอด show,
ซึ่งแสดงองค์ประกอบอย่างราบรื่น
เมธอด slideDown,
ซึ่งแสดงองค์ประกอบอย่างราบรื่น