Question

我一直在看这个JS，我试图找出它没有任何效果的原因。它应该 - 以指定的间隔运行函数，并且，直到某个元素具有0不透明度，它应该继续降低元素的不透明度。

在触发此间隔功能时，屏幕上没有任何反应。有没有人有任何想法？

setInterval(fadeover, 100);

function fadeover() {
    if (document.getElementById("rightopright").style.opacity > 0) {
        var curropac;
        curropac = document.getElementById("rightopright").style.opacity;
        document.getElementById("rightopright").style.opacity = (curropac - 0.1);
    }
}

我确定我在这里做了些蠢事，但无法解决什么...... 任何帮助将不胜感激！

Answer 1

可能您没有为内联opacity属性设置默认值，因此它是一个空字符串（不是大于零的值）。

您需要测试该案例：

function fadeover() {
    var el = document.getElementById("rightopright");
    var op = el.style.opacity;
    if (op === "") { 
        op = 1;
    }
    if (op > 0) {
        el.style.opacity = (op - 0.1);
    }
}

...或忘记JavaScript动画，而是使用CSS 3 transition代替。

Answer 2

除非您对元素本身特别style="opacity:1"，否则theElement.style.opacity将为空字符串。空字符串不大于零，因此函数永远不会运行。

我可以建议如下：

function fadeOut(elem,time) {
    var opac = 1;
    setTimeout(function() {
        opac -= 0.1;
        elem.style.opacity = opac;
        if( opac > 0) setTimeout(arguments.callee,time/10);
    },time/10);
}
fadeOut(document.getElementById('rightopright'),1000);

这个简短的Javascript有什么问题？

2 个答案: