hogehoge foobar Blog Style Beta

Web,Mac,Linux,JavaScript,Perl,PHP,RegExp,Git,Vim,Redmineなど技術的なことのメモや、ちょっと便利そうなものの紹介をしています。

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);
};