JavaScript : 불투명도가 0으로 감소한 다음 음수가됩니다.

Question

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.2 대신 0.3을 빼면 원하는 결과를 얻고 있습니다. 하지만 숫자가 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/