JavaScriptでHTML要素をフェードインさせる
JavaScriptである要素をフェードインする処理を作成してみました。
作成にはyoumos opacity - 半透明を操るJavaScriptを参考にさせていただきました。
/* 透明度の設定*/ setOpacity = function(elm, opacity) { elm.style.filter = 'alpha(opacity=' + (opacity * 10) + ')'; elm.style.MozOpacity = opacity / 10; elm.style.opacity = opacity / 10; } fadeSetTime = function(mode, elm){ var that = this; var fadeTime = function(mode, elm){ var loopCnt = 0; if (mode == 'in'){ var opacity = 0; var plusCnt = 1; }else{ var opacity = 10; var plusCnt = -1; } return function(){ if (loopCnt < 10) { loopCnt += 1; opacity = opacity + plusCnt; setTimeout(fadeTime, 50); setOpacity(elm, opacity); } } }(mode, elm); fadeTime(); }; /*フェードイン*/ fadeIn = function(elm){ this.fadeSetTime('in', elm); };