JavaScript：不透明度应降低到 0，然后变为负数答案

【问题标题】：JavaScript: Opacity should reduce to 0 and then become negativeJavaScript：不透明度应降低到 0，然后变为负数
【发布时间】：2013-03-23 14:46:36
【问题描述】：

我有一个 javaScript 函数。

JavaScript：

function opacZero(object){
    var presentOpacity = (object.style.opacity);
    object.style.opacity =presentOpacity-0.2;
    setTimeout( function(){opacZero(object)}, 40);
}

现在，当我将一些 eobject 传递给这个函数时，它的不透明度应该减少到 0 并超过 0（因为我没有在任何地方清除超时）。但这并没有发生。不透明度降低到 0.20000000000000007 并且不再降低。但是当我减去 0.3（或更多）而不是 0.2 时，它给出了预期的结果。但为什么不使用小于 0.2 的数字。我不知道为什么会这样。请帮忙

【问题讨论】：

我不认为浏览器会喜欢你想要负不透明度。应该如何实现？
没关系！但从逻辑上讲，它应该超过 0，当我减去 0.3 或更多时，这会完美地发生。但不是当我减去 0.2 或更少时。为什么会这样？
为什么它应该超过 0 ？它的 setTimeout 不是 setInterval 函数
这是一个小提琴：jsfiddle.net/bhTNC
当不透明度visibility: hidden或display; none。您可能正在处理浮点不准确性。

标签： javascript opacity

【解决方案1】：

这是由于 Javascript 处理浮点数的方式。查看this SO question 获取有关如何解决此问题的一些建议。

编辑

这是一种解决方法：

function opacZero(object){
    var presentOpacity = Math.floor(object.style.opacity * 10);
    object.style.opacity = (presentOpacity - 2) / 10;
    setTimeout( function(){opacZero(object)}, 40);
}

【讨论】：

解决了这个问题。谢谢

【解决方案2】：

这是一种可能的解决方法：

function opacZero(object){
    curOpac = curOpac < 0.1 ? 0 : curOpac - 0.2;
    object.style.opacity = curOpac;
    setTimeout( function(){
        opacZero(object)
    }, 400);
    console.log( curOpac );
}

var test = document.getElementById( 'test' ),
    curOpac = 1;
test.style.opacity = 1;
opacZero( test );

http://jsfiddle.net/daCrosby/bhTNC/1/

【讨论】：

【解决方案3】：

只检查麻烦的小值并将其强制到0 似乎更简单一些。一旦你点击0，停止计时器也是一个好主意：

function opacZero(object){
    var newOpacity = object.style.opacity - 0.2;
    if (newOpacity < 0.2) {
        newOpacity = 0;
    }
    object.style.opacity = newOpacity;
    if (newOpacity !== 0) {
        setTimeout(function(){opacZero(object)}, 40);
    }
}

工作演示：http://jsfiddle.net/jfriend00/8qkFN/

或者，如果您想要更简短的内容：

function opacZero(object){
    object.style.opacity = object.style.opacity < 0.4 ? 0 : object.style.opacity - 0.2;
    if (object.style.opacity != 0) {
        setTimeout(function(){opacZero(object)}, 40);
    }
}

【讨论】：