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/

Answer 2

这样做你想要的吗？

function fadeout() {

    setInterval( function(){

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

    }, 10 );  
}

Answer 3

问题是由于错误地将值分配给不透明度。要将样式不透明度的值作为文本，您必须将其解析为浮点值，然后您可以正确检查或分配值。

点击此处Demo。

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

纯JavaScript淡入淡出 - 淡入淡出

3 个答案: