0

我试图让显示按钮带回 h1 标签，但它在达到 opacity: 0.1 后停止，而不是一直持续到 opacity: 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始终是 a 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 回答