GORAGOD.com

freelance, web developer, web designer, hosting, domain name

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');
0SHAREFacebookLINE it!
^