วิธี show

วิธี show แสดงองค์ประกอบที่ซ่อนอยู่ อย่างลื่นไหล สามารถซ่อนองค์ประกอบได้ด้วยวิธี hide

ไวยากรณ์

แสดงด้วยระยะเวลาที่กำหนดเป็นมิลลิวินาที ค่าเริ่มต้นคือ 400ms:

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

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

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

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

.show();

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

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

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

.show(options);

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

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

ตัวอย่าง

หลังจากกดปุ่ม ให้แสดง ย่อหน้าที่ซ่อนอยู่อย่างลื่นไหลโดยใช้วิธี show โดยการส่ง คำหลัก slow เราจะกำหนดความเร็ว เป็น 600ms หลังจากแอนิเมชันสิ้นสุด ให้พิมพ์ข้อความ 'แอนิเมชันเสร็จสิ้น' ลงในคอนโซล:

<button>แสดงข้อความ</button>
<p style="display: none">ข้อความ</p>

$('button').click(function() {
	$('p').show('slow', function() {
		console.log('Animation complete')
	});
});

ดูเพิ่มเติม

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