Fading transition effects in JavaScript

Transition effects in JavaScript can be divided into two groups: movement effects and fading effects. Fading effects can be used to soften the transition between two states in a rollover, or used as a subtle transition between different pieces of content. Fader.js is a JavaScript object that aids the creation of such transition effects. In the example below the thumbnails use a quick fade as a rollover effect, whilst clicking on a thumbnail causes the large image to fade more slowly between the seasons. The target season can be changed even whilst a fade is in progress.

Spring Spring
Summer Summer
Autumn Autumn
Winter Winter

Download Fader.js

Download one of the files below and upload it to your web server.

File Size Description
Fader.js 5,876 bytes Full version, with comments
Fader.compressed.js 2,430 bytes Compressed version

Link to the file using a script element in the head of your page:

1
<script type="text/javascript" src="Fader.js"></script>

Using Fader.js

Fader.js fades between a set of panels — pieces of content to fade between — within a container element. Panels can be as simple as individual images, or as complex as required — for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- this element contains the panels -->
<div id="fader">

  <!-- this is the first panel -->
  <img src="example.png" alt="">

  <!-- this is the second panel -->
  <div>
    <!-- arbitrary content -->
  </div>

</div>

To enable fading effects, a new instance of Fader should be created. Either the ID of the containing element, or the DOM node corresponding to it, should be passed as a parameter. For example:

1
2
3
4
5
// create an instance of Fader by passing an ID
var fader1 = new Fader('fader1');

// create an instance of Fader by passing a DOM node
var fader2 = new Fader(document.getElementById('fader2'));

Faders should generally be created immediately after page load, using code such as runOnLoad. By default the fading transitions take half a second to complete. The fading rate can be altered using an optional second parameter, which specifies the duration of fades in seconds. For example:

1
2
// create an instance of Fader that takes a second to fade
var fader = new Fader('fader', 1);

Initially the first panel within the container will be shown. To trigger a fade to another panel, call the setTarget function, passing the desired panel index as a parameter. Note that the first panel has index 0, the second panel has index 1, and so on. For example:

1
2
// fade to the second panel
fader.setTarget(1);

Fading automatically

To cycle through the panels automatically, call the setInterval function. Its first parameter sets the interval between fades in seconds:

1
2
// fade automatically every five seconds
fader.setInterval(5);

The interval to the next automatic fade is reset each time the setTarget method is called, so it is possible to combine automatic fading with manual controls. By default the first fade happens after the specified interval, but the optional second parameter can be used to set this delay in seconds. For example, the delay can be adjusted so that multiple faders fade in sequence:

1
2
3
4
// fade one fader every two seconds
fader1.setInterval(6, 2);
fader2.setInterval(6, 4);
fader3.setInterval(6);

The optional third parameter can be used to provide a function to call each time the target is changed automatically. The function is not passed any parameters, but can access the fader object through the ‘this’ keyword:

1
2
3
4
5
6
7
// fade automatically every five seconds
fader.setInterval(
    5,
    5,
    function(){
      // the current target panel is this.target
    });

To stop fading automatically, call the clearInterval function:

1
2
// stop fading automatically
fader.clearInterval();

Styling faders

When a fader is created, the container is positioned relatively and given a minimum width and height equal to the width and height of the largest panel. If necessary, you can set the width and height of the container explicitly in your stylesheet. Panels are positioned absolutely within the container, with z-indices ranging from 1 to the number of panels.

Where now?

Found this useful? Share it:

Recommended reading:

Professional JavaScript for Web Developers by Nicholas C. Zakas

Also in JavaScript: