JavaScript setTimeout（）重复执行时获取值有问题

Question

 function appears() {
    var opity = document.getElementById('fade-obj').style.opacity;
    if(opity != 1) {   
        console.log(opity);
        document.getElementById('fade-btn').disabled = 'true';          
        document.getElementById('fade-obj').style.opacity += 0.2;
    }else{
        clearInterval(s);
        document.getElementById('fade-btn').innerHTML = '淡出';
        document.getElementById('fade-btn').removeAttribute('disabled');
    }
}
document.getElementById('fade-btn').addEventListener('click', function() {
      if (document.getElementById('fade-btn').innerHTML == '淡入') {
       s =  setInterval(appears,500);
    }
}, false)

结果如下：

document.getElementById('fade-obj').style.opacity的值从0变到0.2后就一直这样，不明白为什么没有加到1.
将函数变成：

 var opity = 0;
function appears() {
    if(opity != 1) {   
        console.log(opity);
        document.getElementById('fade-btn').disabled = 'true';          
        document.getElementById('fade-obj').style.opacity += 0.2;
        opity += 0.2;
    }else{
        clearInterval(s);
        document.getElementById('fade-btn').innerHTML = '淡出';
        document.getElementById('fade-btn').removeAttribute('disabled');
    }
}
document.getElementById('fade-btn').addEventListener('click', function() {
      if (document.getElementById('fade-btn').innerHTML == '淡入') {
       s =  setInterval(appears,500);
    }
}, false)

结果如下：

结果成功了。但不知道上面那个为啥错了

Answer 1

var opity = document.getElementById('fade-obj').style.opacity;
这个值是字符串哦

Answer 2

确实是因为document.getElementById('fade-obj').style.opacity是字符串，然后我用opity = parseInt(opity)+0.2,发现结果仍然不对，但使用 opity = Number(opity) + 0.2 就对了