-
Crossfader
I have a simple situation - I need to crossfade between four absolutely-positioned DIVs. None of the crossfader scripts I could find online did what I needed, so I tried to write my own. This is what I ended up with:
Code:
var currentopacity = new Array(1,0,0,0);
var increments = 0;
function fade(e1,e2){ //fade between e1 and e2
if (increments < 1000) {
currentopacity[e1] -= 0.001;
currentopacity[e2] += 0.001;
document.getElementById('fade'+e1).style = 'opacity: ' + currentopacity[e1] + '; z-index: 2;';
document.getElementById('fade'+e2).style = 'opacity: ' + currentopacity[e2] + '; z-index: 3;';
increments++;
}
else {
increments = 0;
}
window.setTimeout(fade,1,e1,e2);
}
function startfade() { //start fading.
window.setTimeout(fade,5000,0,1);
window.setTimeout(fade,10000,1,2);
window.setTimeout(fade,15000,2,3);
window.setTimeout(fade,20000,3,0);
window.setTimeout(startfade,20000);
}
The DIVs are then set up later in the page and the startfade() function called:
HTML Code:
<div id="fade0" class="fader" style="opacity: 1; z-index: 3;">DIV CONTENT 1</div>
<div id="fade1" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 2</div>
<div id="fade2" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 3</div>
<div id="fade3" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 4</div>
<script type="text/javascript">
startfade();
</script>
The CSS for the fader class is as follows:
Code:
.fader{
position: absolute;
left: 34%;
top: 100px;
height: 100px;
width: 33%;
border-bottom-left-radius: 8px;
}
As you may guess, it doesn't work. The fade0 DIV just sits there, not doing anything.
Why doesn't it work?
-
Code:
<!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>
<style type="text/css">
/*<![CDATA[*/
.fader{
position: absolute;
left: 34%;
top: 100px;
height: 100px;
width: 33%;
border-bottom-left-radius: 8px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
var currentopacity = [1,0,0,0];
function fade(e1,e2){ //fade between e1 and e2
if (currentopacity[e1] >0) {
currentopacity[e1] -= 0.005;
currentopacity[e2] += 0.005;
document.getElementById('fade'+e1).style.opacity=currentopacity[e1];
document.getElementById('fade'+e1).style.zIndex='2';
document.getElementById('fade'+e2).style.opacity=currentopacity[e2];
document.getElementById('fade'+e2).style.zIndex='3';
window.setTimeout(function(){ fade(e1,e2); },10);
}
else {
currentopacity[e1] = 0;
currentopacity[e2] = 1;
}
}
function startfade() { //start fading.
window.setTimeout(function(){ fade(0,1); },5000);
window.setTimeout(function(){ fade(1,2); },10000);
window.setTimeout(function(){ fade(2,3); },15000);
window.setTimeout(function(){ fade(3,0); },20000);
window.setTimeout(function(){ startfade(2,3); },20000);
}
/*]]>*/
</script>
</head>
<body>
<div id="fade0" class="fader" style="opacity: 1; z-index: 3;">DIV CONTENT 1</div>
<div id="fade1" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 2</div>
<div id="fade2" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 3</div>
<div id="fade3" class="fader" style="opacity: 0; z-index: 2;">DIV CONTENT 4</div>
<script type="text/javascript">
startfade();
</script>
</body>
</html>
-
Ah. Okay. I thought something was strange with the way I was calling setTimeout.
However, the script still doesn't work. It still only shows the first element, and none of the other ones.
-
Never mind, it was a problem with something else; it works now.
