jquery animate 动画简单示例

<a href="#" id="tab_box3">
  click me
</a>
<div id="tab-holder">
  <div id="tab3">
    test box
  </div>
</div>

$(document).ready(function(){
  $("#tab_box3").click(function(e){
    var element = $(this),
        clicked = parseInt(element.data('clicked')) || 0;
    element.data('clicked', clicked + 1);
    $("#tab3").stop();
    if (clicked % 2 == 0)
    {
      $("#tab3").animate({
        left:"+=97%"}
                         , 800);
    }
    else
    {
      $("#tab3").animate({
        left:"-=97%"}
                         , 800);
    }
    e.preventDefault();
  }
                      );
}
                 );

#tab-holder {
  position:relative;
  height:500px;
  background:#f1f2f3 }
#tab3 {
  background: #f00;
  width:120px;
  height:120px;
  position:absolute;
  z-index:1;
  top:0;
  left:0 }

演示地址：http://jscssshare.com/#/sample/QRssj3db