Tweet
function fade(elm, boolFadeIn, cb ){
var i=1, ii = 1, st=setTimeout, es=elm.style, del=fade.del || 40;
if(cb && cb.charAt){ cb = Function("element", "hidden", cb); }
if(boolFadeIn && boolFadeIn !="out" ){
if(es.display=="block"){return elm;}
es.display= elm.od || "block";
for ( i = 1; i < 11; i++){
st( function(){ trans(elm, ii++ * 10);}, i * del );
}
st( function(){ es.filter=null; if(cb){ cb.call(elm,elm,100);} }, 12 * del );
}else{
elm.od = es.display !== "none" ? es.display : "";
for ( i = 1; i < 11; i++){
st( function(){ trans(elm, (10 - ii++) * 10);}, 400 - i * del );
}
st( function(){ es.display="none"; trans(elm, 100); if(cb){ cb.call(elm,elm,0);} }, 12 * del );
}
return elm;
}//end fade
fade.del=50; //optional global delay between opacity step
function trans(elm, opacity) { elm.style.opacity = (opacity / 100);}
if("\v"=="v"){ trans= function transIE(elm, opacity) { elm.style.filter = "alpha(opacity=" + opacity + ")";}; }
//usage. firebug example (or anything with window.console)
function report(elm, currentPercentOpacity){
console.log([elm,currentPercentOpacity]);
}
fade(document.body, "out", report ); //fade all out
setTimeout(function(){ //fade back in after 3.5 seconds
fade(document.body, "in", report);
}, 3500);
<div id="mailntag" style="background-color:Purple" onmouseover="/*fade in fadeBlock*/" onmouseout=" /*fade out fadeBlock*/ " >
<br />
<br />
<div id="fadeBlock" style="background-color:Lime;width:250px;
height:65px;text-align:center;display:none">
<br />
I'm Some Text
</div>
<br />
<br />
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="mailntag" style="background-color:Purple" onmouseover="F1.Fade(100);" onmouseout="F1.Fade(0);" >
<br />
<br />
<div id="fadeBlock" style="background-color:Lime;width:250px;
height:65px;text-align:center;display:none" >
<br />
I'm Some Text
</div>
<br />
<br />
</div>
<script type="text/javascript">
/*<![CDATA[*/
function Fade(o){
var oop=this,obj=document.getElementById(o.ID);
this.obj=obj;
this.ms=typeof(o.Duration)=='number'?o.Duration:1000;
this.now=0;
}
Fade.prototype={
Fade:function(f){
var e=window.event||arguments.callee.caller.arguments[0],obj;
if (e.type=='mouseout'){
obj=e.relatedTarget?e.relatedTarget:e.toElement;
while (obj.parentNode){
if (obj==this.obj.parentNode){
return false;
}
obj=obj.parentNode;
}
}
clearTimeout(this.to);
this.obj.style.display='block';
this.animate(this.now,f,new Date().getTime(),this.ms*(Math.abs((f-this.now)/100)));
},
animate:function(s,f,srt,mS){
var oop=this,obj=this.obj,ms=new Date().getTime()-srt,d=(f-s)/mS*ms+s;
if (isFinite(d)){
oop.now=d;
obj.style.filter='alpha(opacity='+d+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=d/100-.001;
}
if (ms<mS){
oop.dly=setTimeout(function(){ oop.animate(s,f,srt,mS); },10);
}
else if (f==0){
oop.obj.style.display='none';
}
}
}
F1=new Fade({
ID:'fadeBlock',
Duration:1000
});
/*]]>*/
</script>
</body>
</html>
Comment