<Javascript Fade animation ⁄ >

body{
  font-family: Tahoma;
  font-size: 62.5%;
}
 
#console{
  font-size: 1.2em;width: 10em;height: 3em;line-height: 3em;padding: .4em;
  color: #204A87;border: solid .1em #A40000;background-color: #EDD400;
  text-align: center;font-weight: 700;
}
 
#console2{
  font-size: 1.1em;
  color: #900;
}
 
#txt1, #txt2, #txt3, #txt4, #txt5, #txt6  {
  padding: .2em;border: solid .1em #A40000; margin: .5em; text-align: center;
  width: 1em; height: 1em; line-height: 1em;
}

/**
* Fader Class
*
* @author: pedrocorreia.net
*
* @param Object Optional, if not specified, animation settings, must do it.
*
* @return Function Set
* @return Function Fade
* @return Function Add
* @return Function Toggle
* @return Function Clear
*
*/
var Fader = function( /**o*/ ) {
 
  /**
  * Get Html Object reference, by its ID
  *
  * @param String Id Object
  * @return Object
  */
  var $ = function(id) {return document.getElementById(id); };
 
  /**
  * Set our html object to animate
  *
  * @param Object
  */
  var _SetObject = function(el){
    o = (el && typeof el !== "object") ? $(el) : el;
  };
 
  //our html object reference
  var o = "";
  //set our html object to animate
  _SetObject(arguments[0]);
 
  //our queue animation
  var _queue = [];
 
  /**
  * Add animation to queue
  *
  * @param Object Animation Settings
  * @return this
  */
  var _AddQueue = function(anim) {
    _queue.push(anim);
    return this;
  };
 
  /**
  * Clear queue
  *
  * @return this
  */
  var _Clear = function(){
    _queue = [];
    return this;
  };
 
  /**
  * Toggle last animation added
  *
  * @return this
  */
  var _Toggle = function() {
    var _anim = _queue[_queue.length-1];
    if(_anim){
      _AddQueue({
        o: _anim.o,
        value: (_anim.value > 50) ? 0 : 100,
        step: _anim.step,
        speed: _anim.speed,
        direction: (_anim.direction === "down") ? "up" : "down",
        callback: _anim.callback
      });
    }
    return this;
  };
 
  /**
  * Remove animation from queue
  *
  * @return this;
  */
  var _RemoveFromQueue = function() { 
    _queue.splice(0,1);
    return this;
  };
 
  /**
  * Start animation
  * When current animation's finished it'll check if queue's empty
  */
  var _Animate = function() {
    var anim=(_queue[0] || null);
    if(!anim){return;} //check if we have an animation in queue
 
    if(typeof anim.callback==="function") {anim.callback.apply(this);}
    if(anim.o) { _SetObject(anim.o); }
 
    var interval = setInterval(
      function() {
        anim.value += (anim.direction==="up" ? anim.step : -anim.step);
        if (anim.value <= 0 || anim.value>=100) {
          _Set((anim.value<=0)?0:100);
          clearInterval(interval);
          _next();
        }
        _Set(anim.value);
      }, anim.speed);
  };
 
  /**
  * Next Animation in queue
  **/
  var _next = function(){
    _RemoveFromQueue();
    _Animate();
  };
 
  /**
  * Set Opacity value
  * 
  * @param Int
  */
  var _Set = function(value) {
    if(!o) {return; }
    o.style.zoom = 1; //hack IE
    o.style.opacity = value / 100;
    o.style.filter = 'alpha(opacity=' + value + ')';
  };
 
  return {
    Set: _Set,
    Fade: _Animate,
    Add: _AddQueue,
    Toggle: _Toggle,
    Clear: _Clear
  };
};

/**
* @author pedrocorreia.net
*/
window.onload = function() {
 
  //auxiliary array to example purposes
  var messages = [
    "Message n.º 1", "Message n.º 2", "Message n.º 3",
    "Message n.º 4", "Message n.º 5", "Message n.º 6"
  ];
 
  //animation sequence
  var o=document.getElementById("msg");
  var fade=new Fader(o);
  for (var i=0, count=messages.length; i<count;i++){
    fade.Add({
      value: 100,
      step: 10,
      speed: 200,
      direction: "down",
      callback: function (value){
        return function (){
          o.innerHTML=value;
        };
      }(messages[i])
    }).Toggle();
  }
  fade.Fade();
  fade=null; //clean resource
  //
 
  //another animation
  var fade=new Fader();
  fade.Add(
    {o: "console2", value: 100, step: 10, speed: 200, direction: "down"}
  ).Toggle().Fade();
  fade=null; //clean resource
  //
 
  //another animation sequence
  var fade=new Fader();
  for (var i=0, count=messages.length; i<count;i++){
    var obj=document.getElementById("txt"+(i+1));
    fade.Add({
      o: obj,
      value: 1,
      step: 10,
      speed: 200,
      direction: "up",
      callback: function (value, obj){
        return function (){
          obj.innerHTML=value;
        };
      }(i+1, obj)
    }).Toggle();
  }
  fade.Fade();
  fade=null; //clean resource
  //  
};

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Fader</title>
  <link rel="Stylesheet" href="style.css" />
  <script type="text/javascript" src="Fader.js"></script>
  <script type="text/javascript" src="Init.js"></script>
</head>
<body>
  <div id="console"><span id="msg"></span></div>
  <br />
  <div id="console2">Another simple animation</div>
  <br />
  <div id="txt1"></div> <div id="txt2"></div> <div id="txt3"></div>
  <div id="txt4"></div> <div id="txt5"></div> <div id="txt6"></div>
</body>
</html>