5

同じ問題に関連する今日の 2 番目の質問です。申し訳ありません。

要素を「フェードアウト」する機能をまとめることができましたが、うまく機能します。私の問題は、それを逆にしようとすると要素が「フェードイン」しないことです。明らかなことを変えようとしましたが、何が間違っているのか理解できません。

これまでの私のコードは次のとおりです。

次のような「div」があるとします。

<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>

フェードアウトに使用している JavaScript 関数は次のとおりです。

var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
    elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
    elem.style.opacity -= .02;
    if(elem.style.opacity < 0){
        clearInterval(desvanecer);
    }
}, speed / 50);
}
fadeOut(getElement, 500);

誰かがこれを見て、私が間違っていることを教えてください。私がやりたいのは、要素を「1」に等しい不透明度に「フェードイン」することだけです。

ちなみに、jQueryは使えませんが、この方法で学びたいと思っています。

ありがとう

関数を逆にする私の試みは次のとおりです。

var getElement = document.getElementById('test');
function fadeIn(elem, speed){
if(elem.style.opacity){
    elem.style.opacity = 0;
}
var desvanecer = setInterval(function(){
    elem.style.opacity += .02;
    if(elem.style.opacity > 1){
        clearInterval(desvanecer);
    }
}, speed / 50); 
}
fadeIn(getElement, 500);
4

1 に答える 1

6

setInterval はグローバル スコープで実行されるため、ウィンドウに相対的なタイマーを定義する必要があります。

スタイル プロパティから返された文字列値を連結して数値を期待することはできません。「0.02.02.02.02」が返されます。

文字列から数字を強制的に取り出し、.02 を追加します。

一部のブラウザーでは機能しますが、9 より前の IE では、不透明度を設定および読み取るために別の式が必要です。

function fadeIn(elem, speed){
    if(elem.style){
        elem.style.opacity= '0';
    }
    window.fadetimer= setInterval(function(){
        elem.style.opacity= +(elem.style.opacity)+.02;
        if(elem.style.opacity> 1){
            clearInterval(fadetimer);
        }
    },
    speed);
}
于 2010-04-23T02:16:55.513 に答える