วิธี fadeTo

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

ไวยากรณ์

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

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

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

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

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

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

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

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

ตัวอย่าง

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

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').fadeTo(1000, 1);
});

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

ดูเพิ่มเติม