循环执行此函数，为什么获取的值没有被累加

Question

想要通过不断执行定时器，改变元素的opacity,但是只函数每次获取的元素的opacity都是0，没有被累加；代码如下：

function appear() {

   var opity = document.getElementById('fade-obj').style.opacity;  

   console.log(document.getElementById('fade-obj').style.opacity);    

    if(opity != 1) {   

        document.getElementById('fade-btn').disabled = 'true';          

        opity += 0.2;

        document.getElementById('fade-obj').style.opacity = opity;

        setTimeout(appear,500);

    }else{

        document.getElementById('fade-btn').innerHTML = '淡出';

        document.getElementById('fade-btn').removeAttribute('disabled');

    }

}

document.getElementById('fade-btn').addEventListener('click', function() {

      if (document.getElementById('fade-btn').innerHTML == '淡入') {

        setTimeout(appear,500);

    }

}, false)

结果如下：

不知道为什么document.getElementById('fade-obj').style.opacity的值不变