Fade Effect (Cross Browser)
Fade In ก็ effect จากจางไปเข้ม ส่วน Fade Out ก็จากเข้มไปจางครับ ฟังก์ชั่นนี้สามารถใช้งานได้กับ layer หรือแม้กระทั่ง Image ครับ ตัวอย่างการใช้งานก็ส่วนแนะนำตัวตอนเข้าเว็บครับ
สำหรับโค้ดนี้ ผมทดสอบแล้วบน IE 6, FireFox 1.5, Opera 9 และ Netscap 8 ครับ
เรียกใช้ก็
fadeIn('id ของ layer หรือ image');
fadeOut('id ของ layer หรือ image');
สำหรับโค้ดนี้ ผมทดสอบแล้วบน IE 6, FireFox 1.5, Opera 9 และ Netscap 8 ครับ
<script language=Javascript>
function fadeIn(id) {
timer = 0;
for (i=0.1; i<100; i++) {
setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * 20));
timer++;
}
}
function fadeOut(id) {
timer = 0;
for (i=99.99; i>0; i--) {
setTimeout("setOpacity(" + i + ",'" + id + "')", (timer * 20));
timer++;
}
}
function setOpacity(opacity, id) {
var el = document.getElementById(id).style;
if (opacity<1) el.visibility='hidden';
else el.visibility='';
el.opacity = (opacity / 100);
el.MozOpacity = (opacity / 100);
el.KhtmlOpacity = (opacity / 100);
el.filter = "alpha(opacity=" + opacity + ")";
}
</script>
เรียกใช้ก็
fadeIn('id ของ layer หรือ image');
fadeOut('id ของ layer หรือ image');