js原生實現div漸入漸出

jq對漸入漸出進行封裝，簡單的使用連個方法就能夠實現。fadeIn(),fadeOut();若是咱們界面沒有使用jq那麼原生怎麼實現呢？

咱們講解一下，這個原理。當咱們要實現漸入的時候，首先是讓隱藏的div慢慢的顯示，經過讓opacity慢慢從 0.0 （徹底透明）到 1.0（徹底不透明）。漸出就是邏輯反過來的。

下面咱們直接貼代碼：

css:

* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#777; background:#222}
a {color:#999; 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 0 5px; width:245px; text-align:center; cursor:pointer; float:left; color:#555}
.button:hover {border:1px solid #fff; background:#d9d9d9; color:#333}
.floatright {float:right}
#fade {opacity:0; filter:alpha(opacity='0') border-radius:3px; -moz-border-radius:3px; margin-bottom:10px; padding:9px 10px 0; height:26px; border:1px solid #548954; 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 ? 100 : 0;
   this.flag = flag || -1;
   this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
   this.si = setInterval(function(){fadeEffect.tween()}, 20);
  },
  tween:function(){
   if(this.alpha == this.target){
    clearInterval(this.si);
   }else{
    var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
    this.elem.style.opacity = value / 100;
    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)<0){
                crossheader.top=parseInt(crossheader.top)+4+'px'
            }
            else{
                crossheader.top=0
                clearInterval(start)
                fadeEffect.init('fade', 1);
            }
        }

 固然啦，這裏必需要初始化

start = setInterval("animatein()",10);