Crossfader

**techno_race** · 10-15-2010, 01:48 AM

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?

Edit: Live example: http://wooftalk.net/fmnas

**vwphillips** · 10-15-2010, 11:35 AM

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>

**techno_race** · 10-15-2010, 09:21 PM

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.

**techno_race** · 10-15-2010, 11:08 PM

Never mind, it was a problem with something else; it works now.

Thread: Crossfader

Thread Tools

Search Thread

Crossfader

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions