JavaScript Fade


Now that you're familiar with cross-browser opacity let's dive into the infamous JavaScript fade that's used all over the Internet. Many sites are using jQuery or another framework for the effect, as John Bloomfield teaches in Javascript Tip: Easy Fading Using jQuery on the Dev Tips website. Instead of going the jQuery route, I'm going to show you how to create the effect from scratch.

setOpacity


setOpacity( string elementID, integer opacityLevel )

As you've probably imagined, all a fade effect does is increase or decrease an elements transparent properties through setTimeout calls. So, the first thing we need is a function to adjust an elements opacity level.

  1. function setOpacity(eID, opacityLevel) {
  2.     var eStyle = document.getElementById(eID).style;
  3.     eStyle.opacity = opacityLevel / 100;
  4.     eStyle.filter = 'alpha(opacity='+opacityLevel+')';
  5. }


fade


fade( string elementID, integer startOpacity, integer stopOpacity, integer duration)

This function requires an element ID, starting opacity level, opacity level to stop at and the duration of the fade in milliseconds. You can easily modify this function to your taste.

  1. function fade(eID, startOpacity, stopOpacity, duration) {
  2.     var speed = Math.round(duration / 100);
  3.     var timer = 0;
  4.     if (startOpacity < stopOpacity){ // fade in
  5.         for (var i=startOpacity; i<=stopOpacity; i++) {
  6.             setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
  7.             timer++;
  8.         } return;
  9.     }
  10.     for (var i=startOpacity; i>=stopOpacity; i--) { // fade out
  11.         setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
  12.         timer++;
  13.     }
  14. }


If you've already taken a look at my smoothScroll, you've probably noticed a few similarities in the fade function. The speed (duration / 100) in conjunction with the timer that's incremented on each iteration of the for loop is used to specify when the setTimeout calls should execute. In an instant, the function starts and finishes putting in play up to 100 timeouts. Since we're dealing with milliseconds, as each timeout expires and the code runs the result to the human eye is a smooth fade or blend.

Users of old computers and browsers may experience some lag. In the case of old browsers, you could simply skip the fade and do setOpacity or show/hide elements if you're also modifying the CSS display attribute (fade in menus, etc).

fadeIn / fadeOut


Here are a few other functions you may find helpful. To avoid writing document.getElementById all over the place getElm can be used and the show / hide functions are used to set the CSS display attribute to block and none respectively.The fadeIn function is intended for an element that's hidden with display:none and fadeOut for an element that was faded in and now needs to be faded out and hidden. Keep in mind, you'll need to build in additional controls to ensure the exact behavior you're looking for. Such controls are purposely left out here.

  1. function getElm(eID) {
  2.     return document.getElementById(eID);
  3. }
  4. function show(eID) {
  5.     getElm(eID).style.display='block';
  6. }
  7. function hide(eID) {
  8.     getElm(eID).style.display='none';
  9. }
  10. function fadeIn(eID) {
  11.     setOpacity(eID, 0); show(eID); var timer = 0;
  12.     for (var i=1; i<=100; i++) {
  13.         setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
  14.         timer++;
  15.     }
  16. }
  17. function fadeOut(eID) {
  18.     var timer = 0;
  19.     for (var i=100; i>=1; i--) {
  20.         setTimeout("setOpacity('"+eID+"',"+i+")", timer * 3);
  21.         timer++;
  22.     }
  23.     setTimeout("hide('"+eID+"')", 310);
  24. }


In the demo you'll find examples of fade, fadeIn and fadeOut so be sure to check that out. For further reading, see javascript effects. You may also enjoy reading Getting Creative With Transparency in Web Design by Sean Hodge on Smashing Magazine.