JavaScript Fade Effect

How to make a fade effect in JavaScript. This script only uses 3 small functions, with a tiny bit of CSS. Highly customizable to fit your own projects. The Timers of the fade effect, are all set with variables, for easy management and customization.

This Article shows how to create a simple JavaScript fade effect, using as little code as possible, while still keeping it simple.

You can easily extend this script, and use it to create a transition for your image slideshow. Many slideshows simply use a fade effect as a transition, and that is arguably one of the best and smoothest transitions available.

To create a "dissolve" effect, you would simply call fadeIn on the next image, somewhat after you have called fadeOut on the last one. Its simply a matter of getting the timings right.

Creating a JavaScript fade effect

Lets take a moment to explain how the script works, and then show the full code in the end. The first you will need, is a clean HTML document.

The CSS

place in the following CSS in the head section:

#Slideshow {
  opacity: 1.0;              /* CSS3 */
  -moz-opacity: 1.0;         /* Older versions of Firefox */
  -khtml-opacity: 1.0;       /* Older versions of Safari */
  filter: alpha(opacity=100); /* Internet Explorer */
}

We are going to use this code, on an element with the ID of slideshow, but you can name the element whatever you want. Just remember to change the relevant code accordingly.

The script uses the CSS Opacity Property, to change the the transparency of the elements, including all its children.

The JavaScript

Note. You should remember to place the script in the body of your HTML, otherwise you should modify the script accordingly. Your browser will not be able to find the element, if you place this script in the head section. That is because whatever is placed there, will be loaded/executed before that in the body section.

The first part of the script is the variables. We are using those purely for simplicity, and one may want to simply hold their values directly in the script. This should however make it easier to update the timings later.

var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */

The SetOpa(); function:

function SetOpa(Opa) {
  element.style.opacity = Opa;
  element.style.MozOpacity = Opa;
  element.style.KhtmlOpacity = Opa;
  element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}

The loops from the two other functions, sets the opacity by calling the SetOpa function. IE doesn't quite support opacity, at least not older versions. And by using its filter, it does it a little different. IE uses a number between 0 and 100, rather then 0.0 and 1.0. This is easily solved by Multiplying the Opa value with 100.

The FadeOut function:

function fadeOut() {
  for (i = 0; i <= 1; i += 0.01) {
    setTimeout("SetOpa(" + (1 - i) +")", i * duration);
  }
   setTimeout("fadeIn()", (duration + hidtime));
}

The main part of this function, is the for loop. Basically the loop runs, as long as the variable i is smaller then 1, (same as 1.0). Basic maths some would say, but even developers can be confused about math sometimes.

The SetTimeout function of JavaScript, runs some code after a predefined duration. We use this function to feed our user made SetOpa function, with the current value of i, (i subtracted from 1).

The math

  setTimeout("SetOpa(" + (1 - i) +")", i * duration);

As for the math inside the setTimeout function? Well i is multiplied by the duration. Each time the loop has been executed one time, the time until the next opacity change becomes greater.

The reason why it is to be made greather, rather then smaller, is that the loop is executed very fast. Its only the timed actions inside of the loop, which are executed later.

  setTimeout("fadeIn()", (duration + hidtime));

Finally we got the part above, which calls the fadeIn and fadeOut functions. Here we simply takes the duration of the fade, sums it up with hidtime, which is the time that the text will stay hidden.

Basically this tell the browser, to run the fadeIn function, after the fadeout has completed.

The full script

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>JavaScript Fade - Brugbart Example</title>
    <style type="text/css">
#Slideshow {
  opacity: 1.0;              /* CSS3 */
  -moz-opacity: 1.0;         /* Older versions of Firefox */
  -khtml-opacity: 1.0;       /* Older versions of Safari */
  filter: alpha(opacity=100); /* Internet Explorer */
}
    </style>
  </head>

  <body>
   <div id="Basement" style="width:90%;margin:auto;">
    <h1 onClick="fadeOut()">Fade Example</h1>
    <div style="width:100%;" id="Slideshow">
    <p>This is a JavaScript Fade example, using setTimeout to change the CSS opacity of elements. This should work on most objects, including images!</p>
    <p>You can use this to rotate your news stories, and as such save some precious space. Just be sure to include a "Show all stories" link, to be nice to your users.</p>
    </div>
    <h2>About this Example</h2>
    <p>This example shows how to create a JavaScript fade effect. </p>
    <p>If you like this example, be sure to check out the rest of <a href="http://brugbart.com/">Brugbart</a>.</p>
   </div>
   
   <script type="text/javascript">
var element = document.getElementById("Slideshow");
var duration = 3000; /* fade duration in millisecond */
var hidtime = 2000; /* time to stay hidden */
var showtime = 2000; /* time to stay visible */

function SetOpa(Opa) {
  element.style.opacity = Opa;
  element.style.MozOpacity = Opa;
  element.style.KhtmlOpacity = Opa;
  element.style.filter = 'alpha(opacity=' + (Opa * 100) + ');';
}

function fadeOut() {
  for (i = 0; i <= 1; i += 0.01) {
    setTimeout("SetOpa(" + (1 - i) +")", i * duration);
  }
   setTimeout("FadeIn()", (duration + hidtime));
}
function FadeIn() {
  for (i = 0; i <= 1; i += 0.01) {
    setTimeout("SetOpa(" + i +")", i * duration);
  }
   setTimeout("fadeOut()", (duration + showtime));
}
   </script>
  </body>

</html>

In the above script, the fade effect will activate when you click the header on the page.

Next: Creating a Fading Slideshow with JavaScript

See also

  1. Fading HTML Elements With Jquery