fadeout动画interval实现

by noahua

HTML

<div id="hook">
This is a Test.
</div>

<button id="btn">Hide</button>

CSS

#hook{width:100px; height:100px;border:1px solid red;border-radius:5px;margin:30px;}
#btn{margin-left:30px}

JavaScript

function $(id){
    return document.getElementById(id);            
}
    
var oText = $("hook"),
    oBtn = $("btn");

oText.style.opacity = 1;

oBtn.onclick = function(e){
    oText.innerHTML = "Hiding...";
    var timer = setInterval(function(){
        if(oText.style.opacity > 0 ){
            oText.style.opacity = parseFloat(oText.style.opacity).toFixed(2) - 0.1;
            console.log(oText.style.opacity);
        } else {
            clearInterval(timer);
        }                
    },100)
}