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。我不知道爲什麼會發生這種情況。幫助PLease

Answer 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); 
} 

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/