PDA

View Full Version : Javascript fade in fade out on settimeout

funnymoney
09-06-2009, 06:05 PM
Javascript fadein and fadeout on body load. nice piece of code, and i want to share it with others.
Has some problems, and can be tweaked even a bit better

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="texthtml;charset=utf-8" />
<script type="text/javascript">
var i = 0;
var x = 0;
function fadetimer() {
var ElementOpacity;
if (x < 8) {
document.getElementById("divone").style.display = 'block';
ElementOpacity = "divone";
document.getElementById("divtwo").style.display = 'none';
document.getElementById("divthree").style.display = 'none';
}
else if (x < 16) {
document.getElementById("divone").style.display = 'none';
document.getElementById("divtwo").style.display = 'block';
ElementOpacity = "divtwo";
document.getElementById("divthree").style.display = 'none';
}
else if (x < 24) {
document.getElementById("divone").style.display = 'none';
document.getElementById("divtwo").style.display = 'none';
document.getElementById("divthree").style.display = 'block';
ElementOpacity = "divthree";
}

if (x >= 24) {
x = 0;
document.getElementById("divone").style.display = 'block';
ElementOpacity = "divone";
document.getElementById("divtwo").style.display = 'none';
document.getElementById("divthree").style.display = 'none';
}



var object = document.getElementById(ElementOpacity).style;

if (i > 8) {
i=1;
object.opacity = (i*25 / 100);
object.MozOpacity = (i*25 / 100);
object.KhtmlOpacity = (i*25 / 100);
object.filter = "alpha(opacity=" + i*25 + ")";
m=0;
}
if(i<=4) {
object.opacity = (i*25 / 100);
object.MozOpacity = (i*25 / 100);
object.KhtmlOpacity = (i*25 / 100);
object.filter = "alpha(opacity=" + i*25 + ")";
}
else if (i > 4){
var m;
m = 8-i;
object.opacity = (m*25 / 100);
object.MozOpacity = (m*25 / 100);
object.KhtmlOpacity = (m*25 / 100);
object.filter = "alpha(opacity=" + m*25 + ")";
}

i++;
x++;
setTimeout("fadetimer()", 500);
}
</script>


<style type="text/css">
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body onload="fadetimer()">
<div id="fadetimer">


<div id="divone">

<h1>Timed</h1>
</div>


<div id="divtwo">
<h1>IN</h1>
</div>

<div id="divthree" >
<h1>Script</h1>
</div>


</body>
</html>
tinfanide
07-07-2011, 03:57 PM
I felt very lucky that I'd found this post on JS fadeIn and fadeOut scripts.
This is the easiest one I have ever found that I could understand.
I am a newbie in JS. I wanna ask where we can set the speed rate of the fading function?
I know that's not setTimeout. I've tried setInterval but the effect was weird. The fading effect only ran once and for all.
Could the post starter expalin a bit on that? Thanks!
vwphillips
07-08-2011, 01:10 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="texthtml;charset=utf-8" />

<style type="text/css">
#fadetimer { width:200px;height:100px;font-size:50px;text-Align:center; }
#fadetimer2 { width:200px;height:100px;font-size:50px;text-Align:center; }
</style>
<script type="text/javascript">
/*<![CDATA[*/

function Fader(o){
this.obj=document.getElementById(o.ID);
this.ary=o.TextArray;
this.mS=o.AnimationDuration;
this.hold=o.Hold;
this.cnt=0;
this.fromto=[0,100];
this.obj.innerHTML=this.ary[0];
this.srttime=new Date();
this.animate();
}

Fader.prototype={

animate:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.opacity((this.fromto[1]-this.fromto[0])/this.mS*ms+this.fromto[0]);
if (ms<this.mS){
setTimeout(function(){oop.animate(); },10);
}
else {
this.opacity(this.fromto[1]);
this.fromto=this.fromto.reverse();
if (this.fromto[0]==0){
this.cnt=++this.cnt%this.ary.length;
this.obj.innerHTML=this.ary[this.cnt];
}
this.dly=setTimeout(function(){ oop.srttime=new Date(); oop.animate(); },this.fromto[0]==0?500:this.hold);
}
},

opacity:function(opc){
var obj=this.obj;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new Fader({
ID:'fadetimer',
TextArray:['Timed','IN','Script'],
AnimationDuration:1000,
Hold:2000
});

new Fader({
ID:'fadetimer2',
TextArray:['As','many','as','required'],
AnimationDuration:500,
Hold:1000
});

}
/*]]>*/
</script>
</head>
<body onload="Init();" >
<div id="fadetimer"></div>
<div id="fadetimer2"></div>

</body>
</html>
Sciliano
07-08-2011, 02:13 PM
tinfanide:

Here's an alternative cross-browser application, with mouseover pause.

No coding needed. Just create the markup for the information sections and the code does the rest.

A demo is here:

Fading Rotator Demo (http://www.javascript-demos.com/1/Fading_Rotator_Demo.html)

Just copy the code for yourself.