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

Question

我有一个 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 的数字。我不知道为什么会这样。请帮忙

Answer 1

这是由于 Javascript 如何处理浮点数。查看这个 SO question以获取有关如何解决它的一些建议。

编辑

这是一种解决方法：

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

Answer 2

似乎更直接地检查麻烦的小值并强制它们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);
    }
}

Answer 3

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

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/