Javascript 简单的淡出不起作用

我用CSS制作了一个简单的长方体，我试图通过使用setInterval对象动态更改其不透明度来使其褪色

CSS

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减去不透明度。

---

有人能解释一下为什么会发生这种情况吗？

您不能将

onload

事件设置为

div

元素。相反，您可以执行以下操作：

HTML

据编辑

---

不能将

onload

事件设置为

div

元素。相反，您可以执行以下操作：

HTML

据编辑

---

关于不透明度的检查应该在循环内

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

---

​演示：

关于不透明度的检查应该在循环内

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

---

​演示：

别忘了jQuery:）我知道用jQuery做这件事会容易得多，但为什么不起作用？别忘了jQuery:）我知道用jQuery做这件事会容易得多，但为什么不起作用？这是一个很好的建议，但我在实际页面的标记中使用了onload事件。问题是，当我使用“-=”操作符时，它开始从零减去不透明度，而它应该从1减去。@senilesage然后您可以尝试设置

css

opacity或写入

select（“box”）。style.opacity=1行在
-=
行之前我认为我的问题没有把问题说得太清楚，所以我做了一些编辑。这是一个很好的建议，但我在实际页面的标记中使用了onload事件。问题是，当我使用“-=”操作符时，它开始从零减去不透明度，而它应该从1减去。@senilesage然后您可以尝试设置
css
opacity或写入
select（“box”）。style.opacity=1行在
-=
行之前我认为我的问题没有把问题说得太清楚，所以我做了一些编辑。
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);

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