javascript で div をフェードイン

Firefox の javascript で div をフェードインを利用しようと style.opacity で簡単に実現
と思いきや IEは、なんだか面倒だった


var div = document.getElementById("hogehoge");
AlphaHideDiv(div); // 非表示
// div へ書き込んだりする
AlphaFadeinDiv(div); // フェードイン


// フェードイン
function AlphaFadeinDiv(div){
 if (window.navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
  var alphavalue = Number(String(div.style.filter.match(/opacity=[0-9]+/)).split('=')[1]);

  if( alphavalue < 100 ){
   div.style.filter = 'alpha(opacity=' + (alphavalue + 25) + ')';
   setTimeout(function () { FadeinDiv(div);  }, 50);
  }
 }else{
  if(div.style.opacity < 1){
   div.style.opacity = Number(div.style.opacity) + 0.25;
   setTimeout( function() { FadeinDiv(div); }, 100);
  }
 }
}

// 前処理(アルファブレンドで非表示にしておく)
function AlphaHideDiv(div){
 if (window.navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
  if ( ! div.currentStyle.hasLayout ){
   div.style.zoom = 1;
  }
  div.style.filter = 'alpha(opacity=0)';
 }else{
  div.style.opacity = 0;
 }
}

コメント