Animated Fading In and Out of Popup Elements

A HunBug Document
Document No.: 11450
Last Updated: 01 Feb 2008
Author: HunBug

Animation in web pages is becoming more common. It's easier on the eye and easier for the user to see what's happening on the page. Here we look at fading in and out popup elements by calling a library Javascript function.

The Function

This example page contains the fade functions. Two buttons on the main page each trigger a popup element to be displayed using the fade in functions. A button on each popup element hides the element using the fade functions.
The example also contains CSS and HTML code for the popup elements.
<html>
  <head>
 
    <style type="text/css">

      .popup {
        border: solid 1px #333;
        font-family: Tahoma;
        font-size: 12px;
        display: none;
        position: absolute;
        width: 300px;
        z-index: 60;
      }

      .popuptitle {
        background: blue;
        color: white;
        font-weight: bold;
        height: 15px;
        padding: 5px;
      }
      
      .popupbody {
        background: #ddd;
        padding: 5px;
        text-align: center;
      }

      #popup1 { top: 100px; left: 50px; }

      #popup2 { top: 100px; left: 400px; }

    </style>

    <script type="text/javascript">

      var fadeOpacity  = new Array();
      var fadeTimer    = new Array();
      var fadeInterval = 100;  // milliseconds

      function fade(o,d)
      {
      
        // o - Object to fade in or out.
        // d - Display, true =  fade in, false = fade out
      
        var obj = document.getElementById(o);
      
        if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block'))
        {
      
          if(fadeTimer[o])
            clearInterval(fadeTimer[o]);
          else
            if(d) fadeOpacity[o] = 0;
            else  fadeOpacity[o] = 9;
        
          obj.style.opacity = "."+fadeOpacity[o].toString();
          obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
          
          if(d)
          {
            obj.style.display = 'block';
            fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
          }
          else
            fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
        }
      }

      function fadeAnimation(o,i)
      {

        // o - o - Object to fade in or out.
        // i - increment, 1 = Fade In

        var obj = document.getElementById(o);
        fadeOpacity[o] += i;
        obj.style.opacity = "."+fadeOpacity[o].toString();
        obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

        if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0'))
        {
          if(fadeOpacity[o]=='0')
            obj.style.display = 'none';
          else
          {
            obj.style.opacity = "1";
            obj.style.filter  = "alpha(opacity=100)";
          }
      
          clearInterval(fadeTimer[o]);
          delete(fadeTimer[o]);
          delete(fadeTimer[o]);
          delete(fadeOpacity[o]);
      
        }  
      }

    </script>

  </head>
  <body>

    <input type="button" value="Show Popup 1" onClick="fade('popup1',true);"/>
    <input type="button" value="Show Popup 2" onClick="fade('popup2',true);"/>

    <div id="popup1" class="popup">
      <div class="popuptitle">Fade Popup 1</div>
      <div class="popupbody">
        <p>Press close to fade out this Popup</p>  
        <input type="button" value="Close" onClick="fade('popup1',false);"/>
      </div>
    </div>

     <div id="popup2" class="popup">
      <div class="popuptitle">Fade Popup 2</div>
      <div class="popupbody">
        <p>Press close to fade out this Popup</p>  
        <input type="button" value="Close" onClick="fade('popup2',false);"/>
      </div>
    </div>

  </body>

</html>

How it Works

Two functions are required for the fading process. The first "fade" is called by the directly by the application, this initialises the procedure variables and uses the setInterval function to call the animation function.
The second function "fadeAnimation", controls the animation by progressively changing the opacity of the element, until it is either fully displayed or completely hidden.

You should happily be able to drop these functions into your page's Javascript and begin using it without modification.

The fade function has two parameters:
  • o: The id string of the object that is to be faded in or out.
  • d: Whether to display or hide the object. Boolean values of true for fade in or false for fade out.

The function can be called instead of setting the display property of an element.
So, instead of
document.getElementById('popup').style.display = 'block';
use.
fade('popup',true);
and instead of
document.getElementById('popup').style.display = 'none';
use.
fade('popup',false);

An array "fadeTimer" is used to manage each fade object. This enables the page to fade multiple objects at once.
Calling the function to fade in an object, whilst it is fading out the same object, will just reverse the fade direction.

The speed of the fade can be controlled by adjusting the "fadeInterval" parameter, which is in milliseconds.

In Action

This test is based on the example code above. Both buttons control a popup element which can both be in animation at the same time.
Fade Popup 1

Press close to fade out this Popup

Fade Popup 2

Press close to fade out this Popup

Further Reading

HunBug: Combine the fading animation with an opaque background to create modal popup elements.
HunBug Store








Comments are all individually read, none are automatically posted to the site.