GFade, GHighlight และ GScroll 3 Effect พื้นฐานที่ทำงานด้วย Javascript ที่เรามักใช้กันบ่อยๆ ซึ่งช่วยให้การแสดง Effect สามารถทำได้ง่ายขึ้นแหละหมดปัญหาเรื่องความแตกต่างของ Browser และยังสามารถใช้ซ้ำได้อย่างง่ายๆอีกด้วย

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