GAJAX บทที่ 8
GFade, GHighlight และ GScroll 3 Effect พื้นฐานที่ทำงานด้วย Javascript ที่เรามักใช้กันบ่อยๆ ซึ่งช่วยให้การแสดง Effect สามารถทำได้ง่ายขึ้นแหละหมดปัญหาเรื่องความแตกต่างของ Browser และยังสามารถใช้ซ้ำได้อย่างง่ายๆอีกด้วย
GFade สำหรับทำ Effect ในรูป Fade In หรือ Fade Out เพื่อเพิ่มความน่าสนใจให้กับข้อความหรือรูปภาพ GFade มี method เพียงตัวเดียวครับ คือ play()
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 ให้ใส่ค่านี้กลับกัน
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ตัวอย่าง : 