setInterval实现渐变效果

实现功能：
1.点击 淡出 按钮，蓝色区域颜色逐渐变淡直至完全透明。
2.蓝色区域变透明的同时，淡出 按钮中的文字变为 淡入 。
3.点击 淡入后，透明的背景逐渐变回蓝色，按钮文字变回淡出。

<body>
    <div id="fade-obj" style="width:300px;height:300px;background:#3399FF"></div>
    <button id="fade-btn">淡出</button>
</body>
<script>
var transColor = document.querySelector('div');
var btnRest = document.querySelector('button');
var speed;
var timer = null;
var alpha;
var target;

// console.log('%O', btnRest);

function startRun() {
    if(btnRest.innerHTML === '淡出') {
        var btnText = '淡入';
        speed = -2;
        alpha = 100;
        target = 0;
    }
    else {
        var btnText = '淡出';
        speed = 2;
        alpha = 0;
        target = 100;
    }
    
    btnRest.disabled = true;
    timer = setInterval(function() {
        alpha = alpha + speed;
        transColor.style.opacity = alpha / 100;
        transColor.style.filter = 'alpha(opacity = alpha)';
        if (alpha == target) {
            clearInterval(timer);
            btnRest.disabled = false;
            btnRest.innerHTML = btnText;
        }
    }, 30)
}
btnRest.onclick = startRun;

</script>