纯JavaScript淡入淡出-淡入不工作

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

我的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);

var cat=document.getElementById（“id10574”）；
cat.style.opacity=1；
函数衰减（）{
如果（cat.style.opacity>0）{
cat.style.opacity=（cat.style.opacity-0.01）；
设置超时（衰减，10）；
}否则{
}
}
函数fadein（）{
如果（类别样式不透明度<1）{
cat.style.opacity=（cat.style.opacity+0.01）；
设置超时（fadein，10）；
}否则{
}
}
document.getElementById（“b1”）.addEventListener（“单击”，淡出，假）；
document.getElementById（“b2”）.addEventListener（“单击”，fadein，false）；

我真的被这件事难住了。尝试在IE8（企业环境中的Sharepoint）上实现简单的效果

---

谢谢

基本上，

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

---

请参见

这是否符合您的要求

function fadeout() {

    setInterval( function(){

        cat.style.opacity = (cat.style.opacity - 0.01);

    }, 10 );  
}

---

该问题是由于不透明度的值分配错误造成的。要使样式不透明度的值成为文本，必须将其解析为浮点值，然后才能正确地检查或指定值

在这里检查

var cat=document.getElementById（“id10574”）；
cat.style.opacity=1；
var-fdout，fdin；
函数衰减（）{
fdout=setInterval（函数（）{
if（parseFloat（cat.style.opacity）>0）{
cat.style.opacity=parseFloat（cat.style.opacity）-0.01；
}否则{
清除间隔（fdout）；
}
}, 10 );   
}
函数fadein（）{
fdin=setInterval（函数（）{
if（parseFloat（类别样式不透明度）<1）{
cat.style.opacity=parseFloat（cat.style.opacity）+0.01；
}否则{
净间隔（fdin）；
}
}, 10 );
}
document.getElementById（“b1”）.addEventListener（“单击”，淡出，假）；
document.getElementById（“b2”）.addEventListener（“单击”，fadein，false）；

这将进入sharepoint（仅支持IE8）；点击事件在我的代码样本中，谢谢，但我的问题是“+0.1”-谢谢！

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

cat.style.opacity = 1;
var fdout, fdin;

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


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

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