jq对渐入渐出进行封装，简单的使用连个方法就可以实现。fadeIn(),fadeOut();如果我们界面没有使用jq那么原生怎么实现呢？
我们讲解一下，这个原理。当我们要实现渐入的时候，首先是让隐藏的div慢慢的显示，通过让opacity慢慢从 0.0 （完全透明）到 1.0（完全不透明）。渐出就是逻辑反过来的。
下面我们直接贴代码：
css:
* {margin:; padding:}
body {font:12px Verdana,Arial; color:#; background:#}
a {color:#; text-decoration:none}
a:hover {color:#bbb}
#wrapper {width:500px; margin:75px auto}
#buttons {height:35px}
.button {border:1px solid #eee; background:#ccc; border-radius:3px; -moz-border-radius:3px; padding:4px 5px; width:245px; text-align:center; cursor:pointer; float:left; color:#}
.button:hover {border:1px solid #fff; background:#d9d9d9; color:#}
.floatright {float:right}
#fade {opacity:; filter:alpha(opacity='') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; padding:9px 10px ; height:26px; border:1px solid #; background:#355c33; color:#79af72; text-shadow:1px 1px #21341d}
html:
<div id="wrapper">
<div id="fade">JavaScript</div>
<div id="buttons">
<div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
<div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
</div>
</p>
</div>
js:
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? : ;
this.flag = flag || -;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * : ;
this.si = setInterval(function(){fadeEffect.tween()}, );
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .)) + ( * this.flag);
this.elem.style.opacity = value / ;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
/*这个可以实现从上缓慢移入过渡效果，注意div必须是绝对定位。*/
/*上图*/
if (document.getElementById||document.all)
var crossheader=document.getElementById? document.getElementById("flyin").style : document.all.flyin.style
function animatein(){
if (parseInt(crossheader.top)<){
crossheader.top=parseInt(crossheader.top)++'px'
}
else{
crossheader.top=
clearInterval(start)
fadeEffect.init('fade', );
}
}
当然啦，这里必须要初始化
start = setInterval("animatein()",10);