javascript - 纯 JavaScript 淡入淡出 - 淡入不起作用

Question

请参阅下面的代码段。淡出效果很好，但知道为什么它不会淡入吗？

我的 HTML:

  <div id="id10574"><span style="font-size:6em">♥</span></div>
  <button id="b1">Fade Out</button>
  <button id="b2">Fade In</button>
  <script src="fade.js"></script>

和 JS:

var cat = document.getElementById("id10574");

cat.style.opacity = 1;

function fadeout() {
    if (cat.style.opacity > 0) {
        cat.style.opacity = (cat.style.opacity - 0.01);
        setTimeout( fadeout, 10 );
    } else { 

    }
}


function fadein() {
    if (cat.style.opacity < 1) {
        cat.style.opacity = (cat.style.opacity + 0.01);
        setTimeout( fadein, 10 );
    } else { 

    }
}

document.getElementById("b1").addEventListener("click", fadeout , false);
document.getElementById("b2").addEventListener("click", fadein , false);

我真的被这个难住了。尝试制作一个适用于 IE8(企业环境中的 Sharepoint)的简单效果。

谢谢!

Answer 1

基本上，cat.style.opacity 是一个字符串。所以 cat.style.opacity + 0.01 将被视为字符串连接。

你可以用 parseFloat(cat.style.opacity) + 0.01 代替

事实上，有很多方法可以将字符串强制转换为数字。 cat.style.opacity - 0.0 作为您的 fadeout()，甚至 1.0 * cat.style.opacity

参见 https://jsfiddle.net/03rzmyL0/