Javascriptista

CSSのclip(rect)を使って、テーブルを一部から徐々に表示させていきます。
SAMPLE

---

<script language="javascript" type="text/javascript">
onload = function(){


  document.forms['testform'].elements['testbutton'].onclick = showUnshow.bind(document.getElementById('testDiv'));

}

function showUnshow(e){

  //fixedかabsoluteを設定する必要がある。
  this.style.position = 'absolute';

  //要素の高さ、幅を取得
  var rect = this.getBoundingClientRect();
  var hgt;
  var wdh;
  if(rect.height){
    hgt = rect.height;
  }else{
    hgt  = rect.bottom - rect.top;
  }
  if(rect.width){
    wdh = rect.width;
  }else{
    wdh = rect.right - rect.left;
  }
  //小数を切り上げ
  wdh = Math.ceil(wdh);
  hgt = Math.ceil(hgt);

  //表示か非表示かを判定
  var val = this.style.clip.replace(/ /g,"");
  var isShown = false;
  var regx = new RegExp('rect\\([0-9]+px,[0-9]+px,([0-9]+)px,[0-9]+px\\)');
  if (val.match(regx)) {
    if(RegExp.$1>0){
      isShown = true;
    }else{
      isShown = false;
    }
  }else{
    isShown = true;
  }

  //表示処理
  if(isShown){
    var timerId = setInterval(function(){
      hgt = hgt-1;
      if(hgt < 0){
        clearInterval(timerId);
        return;
      }
      this.style.clip = 'rect(0px,' + wdh + 'px,' + hgt + 'px,0px)';
    }.bind(this),5);
  //非表示処理
  }else{

     tempHgt = 0;
      var timerId = setInterval(function(){
      tempHgt = tempHgt + 1;
      if(tempHgt > hgt){
        clearInterval(timerId);
        return;
      }

      this.style.clip = 'rect(0px,' + wdh + 'px,' + tempHgt + 'px,0px)';

    }.bind(this),5);
  }
}
</script>

---

1.CSSのclipを使うにはpositionを"absolute"または"fixed"に設定する必要があります。
2.テーブルの高さ、幅を取得しています。
3.CSSのclipの値を正規表現でチェック。表示状態か非表示状態かをチェックしています。
4.表示処理、非表示処理をしています。setIntervalを使用してユーザーに少しずつ切り取りながら見せていきます。