JS淡入淡出(fadeIn/fadeOut)


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS淡入淡出(fadeIn/fadeOut)</title>


<input id="btn1" type="button" value="11111" />
<input type="button" value="透明度1" onClick="fadeOutxx()" />

<input type="button" value="透明度2" onClick="fadeInxx()" />
<input id="btn2" type="button" value="22222" style="    
filter:alpha(opacity=10);  
-moz-opacity:0.1;   
-khtml-opacity: 0.1;   
opacity: 0.1;   
" />


<script>

var i=100;
var timer1,timer2;


var btn1=document.getElementById('btn1');
function fadeOutxx(){
    if(i>1){
        i--;
        timer1=setTimeout("fadeOutxx()",10);
    }
    if('IE'==clientType()){
        btn1.style.filter = 'alpha(opacity='+i+')';
    }
    else{
        btn1.style.opacity = i/100;
    }
    document.title=i;
}


var u=0;
var btn2=document.getElementById('btn2');
function fadeInxx(){
    if(u<99){
        u++;
        timer2=setTimeout("fadeInxx()",10);
    }
    if('IE'==clientType()){
        btn2.style.filter = 'alpha(opacity='+u+')';
    }
    else{
        btn2.style.opacity = u/100;
    }
    document.title=u;
}  



  
function clientType(){
    if(navigator.userAgent.indexOf("MSIE")>0) {
        return "IE";
    }
    if(navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
    }
    if(navigator.userAgent.indexOf("Chrome")>0) {
        return "Chrome";
    }
    return "other";
}  
</script> 

程序运行结果如下,点击这里亲自运行看看