...

View Full Version : FadeIn FadeOut source code



irmorteza
08-25-2011, 08:02 PM
I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

Best Morteza

rnd me
08-25-2011, 08:17 PM
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);

irmorteza
08-25-2011, 09:39 PM
thanks alot for answering.

but it not work. may you please explain on below example.


there is "fadeBlock" that its display is none by default. onmouseover of maintag, "fadeBlock" do fadeIn and in the onmouseout, it fade out.

---------------------


<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>

vwphillips
08-26-2011, 09:14 AM
<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum