GORAGOD.com

Fade Effect (Cross Browser)

Fade In ก็ effect จากจางไปเข้ม ส่วน Fade Out ก็จากเข้มไปจางครับ ฟังก์ชั่นนี้สามารถใช้งานได้กับ 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');