纯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/