GAJAX บทที่ 8
GFade สำหรับทำ Effect ในรูป Fade In หรือ Fade Out เพื่อเพิ่มความน่าสนใจให้กับข้อความหรือรูปภาพ GFade มี method เพียงตัวเดียวครับ คือ play()
var fader = new GFade(el);
fader.play(options);
el คือ Element ที่ต้องการ Fade ครับ สามารถใช้ ID name หรือ Node ก็ได้ครับ
options เป็นข้อมูลชนิด hash ครับ ได้แก่
from: 0 - 100 ค่าเริ่มต้นการ Fade 0 คือจาง 100 คือเข้มสุด (0)
to: 100 - 0 ค่าสิ้นสุดการ fade ว่าจะให้สิ้นสุดที่ความโปร่งใส (opacity) เท่าใด (100)
speed: ความเร็วในการ fade (50)
duration: ระยะการ fade เป็น step จาก from ถึง to (5)
onComplete: event เมื่อการ fade สิ้นสุดแล้ว
หมายเหตุ * สีชมพูคือค่า default
ค่าเริ่มต้นของการ fade กำหนดให้ from เป็น 0 และ to เป็น 100 ซึ่งหมายถึงการ Fade In หากต้องการทำ Fade Out ให้ใส่ค่านี้กลับกัน
new GFade('image').play({'onComplete':function(){$E('fadeDemo').innerHTML = 'Fade In Complete'}}); // fade in
new GFade('image').play({'from':100,'to':0,'onComplete':function(){$E('fadeDemo').innerHTML = 'Fade Out Complete'}}); // fade out
ตัวอย่าง :