javascript で div をフェードイン
Firefox の javascript で div をフェードインを利用しようと style.opacity で簡単に実現
と思いきや IEは、なんだか面倒だった
と思いきや 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; } }
コメント