0

私はこのJSを見てきましたが、なぜ効果がないのかを解明しようとしています. 指定された間隔で関数を実行し、特定の要素の不透明度が 0 になるまで要素の不透明度を減らし続ける必要があります。

このインターバル関数を起動しても、画面には何も起こりません。誰にもアイデアはありますか？

setInterval(fadeover, 100);

function fadeover() {
    if (document.getElementById("rightopright").style.opacity > 0) {
        var curropac;
        curropac = document.getElementById("rightopright").style.opacity;
        document.getElementById("rightopright").style.opacity = (curropac - 0.1);
    }
}

私はここで愚かなことをしていると確信していますが、何がうまくいかないのですか...どんな助けも大歓迎です!

4

2 に答える 2

3

おそらく、インライン プロパティのデフォルト値を設定していないopacityため、空の文字列です (ゼロより大きい値ではありません)。

その場合はテストする必要があります。

function fadeover() {
    var el = document.getElementById("rightopright");
    var op = el.style.opacity;
    if (op === "") { 
        op = 1;
    }
    if (op > 0) {
        el.style.opacity = (op - 0.1);
    }
}

… または、JavaScript アニメーションを忘れて、代わりにCSS 3 トランジションを使用します。

于 2013-07-10T10:30:41.930 に答える
1

style="opacity:1"要素自体を特に指定しない限りtheElement.style.opacity、空の文字列になります。空の文字列は 0 より大きくないため、関数は実行されません。

私は次のことを提案するかもしれません：

function fadeOut(elem,time) {
    var opac = 1;
    setTimeout(function() {
        opac -= 0.1;
        elem.style.opacity = opac;
        if( opac > 0) setTimeout(arguments.callee,time/10);
    },time/10);
}
fadeOut(document.getElementById('rightopright'),1000);
于 2013-07-10T10:32:25.330 に答える