Fade In/Fade Out

by Ryan Frishberg

We're going to make an image (actually a layer, so anything could be in there...not just an image) fade out and be gradually replaced by another which is fading in. Since we'll use an IE-specific feature, we need to block Netscape users from rendering the code. We can do this with if(document.all) because that will return true only for IE 4 and IE 5. Now, let's define our two layers:

Access Opacity

Then, to access the CSS filter attribute, in IE 4, use: document.all[layerID].style.filter and in IE 5, document.getElementById(layerID).style.filter. But since IE 5 supports document.all, we're just going to use document.all to make it easier on us, rather than have to make 2 different scripts (one using document.all and one using document.getElementById).

To access the alpha property of CSS, we use:
document.all[layerID].style.filter.alpha
and to access the opacity property of alpha, we use:
document.all[layerID].style.filter.alpha.opacity
So, now that we know how to access the opacity property, let's look at our script to fade in/fade out the images.

The Code

<script>
var i, j;

This code defines the global variables. i will control the value used in fadeOut() and j will control the value used in fadeIn().

      function fadeOut(layerID){
            i-=2;
            document.all[layerID].filters.alpha.opacity=i;
            if(i!=0) setTimeout("fadeOut('"+layerID+"')",20);
      }

This function fades out the specified layer. It firsts takes the variable, i, and decreases it by two. Then, assigns the variable, i, to the opacity of the layer; thus, it successfully fades out the layer. Then, it creates a setTimeout() to run this same function again, creating a loop. However, if it's faded out all the way (i equals zero), then it won't run this function again (thus stopping the loop).

      function fadeIn(layerID){
            j+=2;
            document.all[layerID].filters.alpha.opacity=j;
            if(j!=100) setTimeout("fadeIn('"+layerID+"')",20);
      }

This function fades in the specified layer. It firsts takes the variable, j, and increases it by two. Then, assigns the variable, j, to the opacity of the layer; thus, it successfully fades in the layer. Then, it creates a setTimeout() to run this same function again, creating a loop. However, if it's faded in all the way (j equals zero), it won't run this function again (thus stopping the loop).

      function fadeInOut(layerID1,layerID2){
            if(document.all){
                  i=100; j=0;
                  fadeOut(layerID1);
                  setTimeout("fadeIn('"+layerID2+"')",200);
            }
      }

This function accepts two arguments, the layerID of the layer to fade out, and the layerID of the layer to fade in. It then sets the variable which controls the fadeOut() function to 100. This is so the layer starts without being faded at all. It also sets the variable which controls the fadeIn() function to 0. This is so the layer starts totally faded. Then, it calls the fadeOut() function, which will later call itself and create a loop. It also tells the fadeIn() function to run in 200 milliseconds. This gives the layer that's fading out a time to fade out a little bit, giving it a nice effect. Then, the fadeIn() function will call itself and create a loop.

// fadeInOut("image1","image2");
</script>

If this part of the code were run, it would tell the fadeInOut() function to run. It also tells it to fadeOut the "image1" layer and fadeIn the "image2" layer.

Now, here's what the effect looks like in action: Example 6

Surprise...Netscape 6 can do it too

Although, I know I've specifically said this was going to be IE-only, I lied. Netscape 6 has tried to keep up with IE, and it has instituted it'd own proprietary opacity feature, -moz-opacity. You can set this to range from 0-1, and it works just the same as opacity works in IE 4+. Here's an example code:

Besides using an integer ranging from 0-1, we can also use a percent because .3 is basically 30%:

Then, to access it that CSS attribute, we use:

document.getElementById("img1").style.MozOpacity

Cross-browser Code (not NS 4)

So, to make the above code work in NS 6 as well as IE 4+, we use:

      function fadeInOut(layerID1,layerID2){
            if(document.all||document.getElementById){      // if IE 4+ (including IE 4, IE 5, and IE 6) or NS 6+
                  i=100; j=0;
                 fadeOut(layerID1);
                 setTimeout("fadeIn('"+layerID2+"')",200);
            }
      }

// fadeInOut("image1","image2");
</script>

And here's the outcome: Example 7

Before we move on to more stuff about layers, I have a challenge for you dealing with accessing the CSS styles of a layer. Create a generic function that will horizontally center any layer on the screen. In the next section, the solution will be provided. Good Luck!

Next -->