fadeIn fadeOut

by marlanga

HTML

<div id="div"></div>
<button id="fadein">fade in</button>
<button id="fadeout">fade out</button>

CSS

div { width:100px; height:100px; background-color:red; opacity:0; filter:alpha(opacity=0); }

JavaScript

Element.prototype.fade=function(a,b,ms){
    this.a=a;
    this.b=b;
    this.ms=ms;
    this.opacidad=function(op){
        this.style.opacity=op/100;
        this.style.filter='alpha(opacity='+op+')';
    };
    this.opacidad(this.a);
    var self=this;
    this.intervalo=setInterval(function(){
        self.a=(self.a<self.b)?self.a+1:self.a-1;
        self.opacidad(self.a);
        if (self.a==self.b)
        {
            clearInterval(self.intervalo);
        }
    },this.ms/Math.abs(this.a-this.b));
}
    



document.getElementById("fadein").onclick=function(){ div.fade(0,100,1500); };
document.getElementById("fadeout").onclick=function(){ div.fade(100,0,1500); };