Navigate back home
DHTML effect: Fading
Introduction:

Here is a DHTML fading effect, where a given node's opacity changes smoothly from one minimum value to a maximum value and back. Since opacity is unfortunately not handled in a standard way by the web browsers yet, only IE and Mozilla (Firefox, etc...) browsers have been fully tested. If you experience problems with this effect, please contact me with details.

Note: For opacity to work in Internet Explorer, it is necessary to set either "position: absolute" or a "float" value. If other positioning attributes are used, the opacity settings are ignored by IE. Firefox, however, doesn't have this limitation. That can be a real bother!

Adding the effect to a DOM node is very easy; for example:

var oOptions = { iMinimum : 10, iMaximum : 90, iDeltaFade : 2, iTimerMilliseconds : 15, bRemoveAfterFade : true }; var oFadedNode = new gslb.FadedNode( document.getElementById( "divLogo" ), oOptions ); (with:) <div id="divLogo" style="filter: alpha(opacity=50); -moz-opacity: 0.5; display: block; float: center;"> <img src="http://www.galasoft.ch/logo/smallhead.gif" /> </div>
Creating a fading node

The different options all have default values, and thus can be omitted. In fact, the whole "options" object can be omitted in the constructor, in which case all options use default values. The options available are:

  • iMinimum: The minimum level of opacity applied to the Node. Default: 0%.
  • iMaximum: The maximum level of opacity applied to the Node. Default: 100%.
  • iDeltaFade: The amount added or removed to the opacity on each iteration during transitions (fading/unfading). Default: 1%.
  • iTimerMilliseconds: The duration of one iteration (in milliseconds) during transition (fading/unfading). Default: 10 milliseconds.
  • bRemoveAfterFade: If true, when the node reaches the minimum level of opacity, it will be removed (ie display : none), so that underlying controls can be actioned. This is mostly useful when the minimum level is 0 and when the Node's position is absolute. To enable this functionality, the Node must have CSS display set in its style. Default: false.

A FadedNode has the following methods:

  • isFaded(): Returns true if the Node reached the minimum level of opacity.
  • isUnfaded(): Returns true if the Node reached the maximum level of opacity
  • fade( fnOnTransitionEnd ): Starts a transition to the maximum level of opacity to the minimum level.
    Note: If the Node already reached the minimum level of opacity, or if a transition is currently running, this method is not active.
    The parameter fnOnTransitionEnd (optional) is a Function, which is executed when the transition is finished. Can also be null.
  • unfade( fnOnTransitionEnd ): Starts a transition from the minimum level of opacity to the maximum level.
    Note: If the Node already reached the maximum level of opacity, or if a transition is currently running, this method is not active.
    The parameter fnOnTransitionEnd (optional) is a Function, which is executed when the transition is finished. Can also be null.
  • setOpacity( iOpacityPercents ): Sets the new level of opacity for this faded node. The level is applied with a transition.
    Note: It is possible to set the new opacity outside of the range defined by the options for this node.
    The parameter iOpacityPercents is an Integer, and defines the new opacity in percents.
  • setOptions( oOptions ): Sets new options for this instance. See the Options definition above.
Live demo

Here is an example showing two DIVs with fading effects. Both FadedNodes are created with default options. One has no initial opacity defined, the other has an initial opacity of 50%; the controls underneath allow to modify the options on one or the other DIV.

GalaSoft logo
 DIV 1     DIV 2

Options:
 Minimum opacity
 Maximum opacity
 Delta fade
 Timer milliseconds
 Remove after fade
 New opacity level
Downloads

Click to see the code.
Right-click and "Save as..." to save locally.
After saving, remove the ".txt" extension to execute the code in your web browser.

History
Date Version Description
17.11.2007 V1.0.4
  • Clean-up, cosmetic changes, bug corrections
31.01.2007 V1.0.0
  • Modified to work also with styles set in external files.
  • Modified example to work with "opacity" too.
06.01.2007 V1.0.0
  • Created, First official version