javascript - 简单的淡入淡出不起作用

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

演示

根据编辑

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