0

表示ボタンに h1 タグを戻させようとしていますが、不透明度: 1 までずっと続けるのではなく、不透明度: 0.1 に達した後に停止します。

Firebug で何時間もデバッグを試みましたが、クラックできないようです。助けてください。

<!DOCTYPE html>
<html>
<head>
<title>Flesh and Bone</title>
</head>
<body>
<h1>Flesh and Bone</h1>
<button id="fade">Fade</button>
<button id="show">Bring Back</button>
<h2>The Killers</h2>
<script>
    var el = document.querySelector("h1");
    var fade = document.getElementById("fade");
    var show = document.getElementById("show");
    var fader = function () {
        el.style.opacity = 1;
        var timer = setInterval(function (){
            el.style.opacity -= 0.1;
            if (el.style.opacity == 0) {
                clearInterval(timer);
            }
        }, 40);
    }
    var shower = function () {
        el.style.opacity = 0;
        var timer = setInterval(function (){
            el.style.opacity += 0.1;
            if (el.style.opacity == 1) {
                clearInterval(timer);
            }
        }, 40);
    }
    fade.onclick = fader;
    show.onclick = shower;
</script>
</body>
</html>
4

3 に答える 3

2

これは、浮動小数点演算の動作によるものです。この質問で説明されています。不透明度が実際に 0 になることはないため、タイマーがクリアされることはありません。

toFixed(1)解決策は、減算と加算を実行するときに使用することです。

var timer = setInterval(function (){
        el.style.opacity = (el.style.opacity - 0.1).toFixed(1);
        if (el.style.opacity == 0) {
            clearInterval(timer);
        }
    }, 40);

JSfiddle の例はこちら: http://jsfiddle.net/28XNK/2/

于 2013-07-27T21:26:18.640 に答える
2

いくつかのことがこれに貢献しています:

  1. el.style.opacityは常に であるStringため+=、追加するのではなく連結します。不透明度を別の変数に保持して、Number.

  2. 数字は最後まで正確ではありませ== 1ん== 0。代わりに>= 1andを使用してください。<= 0

var fader = function () {
    var opacity = 1;
    el.style.opacity = opacity;
    var timer = setInterval(function () {
        opacity -= 0.1;
        el.style.opacity = Math.max(opacity, 0);
        if (opacity <= 0) {
            clearInterval(timer);
        }
    }, 40);
}

http://jsfiddle.net/qBgJY/

于 2013-07-27T21:28:35.237 に答える
1

opacity は文字列プロパティであるため、変更するには float に変換する必要があります。

el.style.opacity = parseFloat(el.style.opacity) + 0.1;
于 2013-07-27T21:31:34.457 に答える