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

【问题标题】：What is wrong with this short Javascript?这个简短的 Javascript 有什么问题？
【发布时间】：2013-07-10 10:27:18
【问题描述】：

我一直在查看这个 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);
    }
}

我确定我在这里做了一些愚蠢的事情，但不知道是什么...... 任何帮助将不胜感激！

【问题讨论】：

试试 curropac - parseFloat(0.1)
我想说这只是为了淡出某些东西而编写的代码太多了..
@techfoobar 你有什么建议？
@Kolink - 我建议 jquery 的淡出，假设在应用程序中有更多的东西 jquery 可以大力投入..
@Kolink - 至少，我建议缓存 #rightopright 元素.. 我看到你的答案正在这样做

标签： javascript css function stylesheet opacity

【解决方案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。

【讨论】：

也许您应该先将op 转换为数字，然后再减去...el.style.opacity = (+op - 0.1);，如果已分配不透明度，它将是字符串
减法运算符会自动convert both its operands to Numbers。明确地这样做没有任何用处。
哇，多么棒的反应！感谢所有回复的人。我假设 opacity 的基本整数值为 1，如果它没有被设置并被渲染到屏幕上——我错了。再一次，来自这个社区的精彩回应。感谢您的帮助。

【解决方案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);

【讨论】：

感谢您的见解，它也帮助我理解了上面的答案:)