简单的淡化不起作用

Question

我用CSS创建了一个简单的框，我试图通过使用setInterval对象动态改变它的不透明度来淡化它。

http://jsfiddle.net/5gqRR/7/

CSS

#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}

JAVASCRIPT

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade=setInterval(function(){
        select("box").style.opacity-=0.1;   
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }   
    else {
        select("box").style.display="block";    
    }
}

问题是“ - =”运算符开始从0而不是1减去不透明度。 有人可以解释为什么会这样吗？

Answer 1

您对不透明度的检查应该在循环内。

function select(id) {
    return document.getElementById(id);
}


// Run at loading
window.onload = function () {
    // Preload variables
    var box = select('box'), opacity = 1, fade;

    // Looping
    fade = setInterval(function(){
        // Calculate and applying opacity
        opacity = Math.max( 0, opacity - 0.1 );
        box.style.opacity = opacity;

        // Stoping loop when box isn't visible
        if ( !opacity )
            clearInterval(fade);
    },30);
};

演示：http://jsfiddle.net/5gqRR/8/

Answer 2

您无法将onload事件设置为div元素。而不是你可以这样做：

的 HTML 的

<div id="box"></div>

的的JavaScript 的

var fade;
function select(id) {
    return document.getElementById(id);
}
function disBox() {
    fade = setInterval(function(){
        select("box").style.opacity-=0.1;    
    },300);
    if (select("box").style.opacity==0) {
        clearInterval("fade");
        select("box").style.display="none";
    }    
    else {
        select("box").style.display="block";    
    }
}

window.onload = (function() {
    disBox();
})();

的 Demo 的

根据编辑

select("box").style.opacity = 1;  // add this line to set initial opacity
fade = setInterval(function(){
            select("box").style.opacity-=0.1;    
        },300);