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;
}
}
コメント