文字のフェードとズーム

// ステップ制御オブジェクト
function Stepper(idn,do_func,vs,ve,steps,end,interval) {
  this.id      = idn;      // 対象要素のID名
  this.do_func = do_func;  // ステップ実行関数
  this.vs      = vs;       // 開始オブジェクト
  this.ve      = ve;       // 終了オブジェクト
  this.steps   = steps;    // ステップ数
  this.end     = end;      // 終了関数
  this.interval= interval; // インターバル時間
}
Stepper.prototype.element = null; // 対象要素のオブジェクト
Stepper.prototype.step    = 0;    // 現在のステップ
Stepper.prototype.out     = 0;    // 動作方向( in = 0, out = 1 )
Stepper.prototype.tid     = null; // タイマオブジェクト
// ステップ実行メソッド
Stepper.prototype.do_step = function(out){
  this.out = out;
  var nstp = out?(this.step-1):(this.step+1);
  if(nstp<0         ) nstp = 0;
  if(nstp>this.steps) nstp = this.steps;
  if(nstp == this.step){
    if(this.end) this.end(out);
    return 1; // 完了
  }
  if(    this.element
     || (this.element=document.getElementById(this.id)))
  {
    this.do_func(out,nstp);
  }
  this.step = nstp;
  return 0;   // 継続
}
// 終了関数呼び出しメソッド
Stepper.prototype.call_endcallback = function(){
  if(this.end) this.end(this.out,this.ed_cd);
}
// 動作停止メソッド
Stepper.prototype.cancel = function(){
  if(this.tid){
    clearTimeout(this.tid); this.tid=null;
    this.call_endcallback();
  }
}

// 終了関数
function end(out){
  if(out && this.element)
    this.element.style.visibility = 'hidden';
}
// 開始関数
function start(out,id){
  if(!out)
    document.getElementById(id).style.visibility = 'inherit';
}
// 実行関数
function manage(n,out){
  var obj = objs[n];
  var fin = obj.do_step(out);
  obj.tid = fin?null:setTimeout('manage('+n+','+out+')',obj.interval);
}
// 終了関数
function closure(){
  for(var i=0; i<objs.length; i++){
    var obj = objs[i];
    if(obj.tid){ clearTimeout(obj.tid); obj.tid=null; }
  }
}
// 開始関数
function action(n,out){
  if(!document.getElementById) return;
  var obj = objs[n];
  obj.cancel();
  start(out,obj.id);
  manage(n,out);
}

// Stepper オブジェクトの定義
objs = new Array(
  new Stepper('fade',do_fade,    // 要素名と実行関数
    new Array( 0x33,0x99,0x66 ), // 開始時の色
    new Array( 0xd1,0xf1,0xcd ), // 終了時の色
    10,                          // ステップ数
    end,                         // 動作完了時に呼び出す関数
    100)                         // インターバル時間( msec )
  );
// 色値計算関数
function calc_color(v1,v2,n,i){
  return Math.floor((v2-v1)/n*i+v1);
}
// フェード実行関数
function do_fade(out,nstp){
  var r = calc_color(this.vs[0],this.ve[0],this.steps,nstp);
  var g = calc_color(this.vs[1],this.ve[1],this.steps,nstp);
  var b = calc_color(this.vs[2],this.ve[2],this.steps,nstp);
  this.element.style.color = 'rgb('+r+','+g+','+b+')';
}

<p id="fade">fade string</p>

// Stepper オブジェクトの定義
objs = new Array(
  new Stepper('zoom',do_zoom, // 要素名と実行関数
    9, 72,                    // 開始と終了時の文字サイズ( pt )
    20,                       // ステップ数
    end,                      // 動作完了時に呼び出す関数
    100),                     // インターバル時間( msec )
  );
// ズーム実行関数
function do_zoom(out,nstp){
  var fs = (this.ve-this.vs)/this.steps*nstp+this.vs;
  this.element.style.fontSize = Math.floor(fs)+'pt';
}

<div id="zoom">Zoom string</div>