เมธอด fadeOut

เมธอด fadeOut จะซ่อนองค์ประกอบอย่างนุ่มนวล การแสดงองค์ประกอบสามารถทำได้โดยใช้เมธอด fadeIn โดยทำให้มันทึบแสง

ไวยากรณ์

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

javascript.fadeOut(ระยะเวลา);

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

javascript.fadeOut('slow' หรือ 'fast');

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

javascript.fadeOut();

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

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

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

javascript.fadeOut(options);

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

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

ตัวอย่าง

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

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

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

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

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

ตัวอย่าง

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

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

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

javascript$('#show').on('click', function() {
  $('#test').fadeIn(1000, function() {
    alert('!');
  });
});

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

ดูเพิ่มเติม