JavaScript:不透明度应该降低到0，然后变为负值

JavaScript: Opacity should reduce to 0 and then become negative

本文关键字：然后 不透明度 JavaScript      更新时间：2023-09-26

我有一个javaScript函数

JavaScript: 

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

现在，当我传递一些对象到这个函数，它的不透明度应该减少到0，并超过0(因为我没有清除超时任何地方)。但这并没有发生。不透明度降低到0.20000000000000007，不再降低。但是当我减去0.3(或更大)而不是0.2时，它就得到了想要的结果。但是为什么不使用小于0.2的数字呢?我不知道为什么会这样。帮助请

这是由于Javascript处理浮点数的方式。看看这个问题，你会得到一些关于如何解决这个问题的建议。

编辑

这里有一个绕过它的方法:

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

这是一个可能的工作:

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/

似乎更直接一些，只是检查麻烦的小值，并强制它们到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);
    }
}
相关文章：