常見的動畫有四種類型，介紹一下：
　　linear：線性動畫，即勻速
　　easeIn：速度從小到大，即淡入
　　easeOut ：速度從大到小，即淡出
　　easeInOut：開始時速度從小到大，結束時速度從大到小，即淡入淡出

其實說到緩動，就不得不提Robert Penner，他發明了N多緩動公式，舉個例子

我還是解釋一下吧：

　　設當前變化量為X，則
　　t / d = X / c，所以X = c * t / d，然后X + b就可以獲得當前屬性值

再看一個稍復雜的：
 
這個有淡入效果，也就是說動畫開始時，值的變化量從小到大。
可以發現兩者唯一的區別就是 t / d 和 (t /= d) * t，剛才說了t / d是一個>=0 && <=1的比值，暫取名為a，而(t /= d) * t就相當于Math.pow(a, 2)。

為什么要平方呢？

1. 首先a >= Math.pow(a, 2)是肯定的
2. 每次調用函數時，t / d 這個比值也是勻速變大的，比如第1次調用時是0.1(平方0.01)，第2次調用時是0.2(平方0.04)等，那第10次調用時，肯定是1沒錯吧，這時候 c * 1 + b，動畫就到此結束了
3. 第2點證明了比值越小，值的變化量就越小，比值越大，值的變化量就越大，如果不用平方而是三次方，那淡入效果就更明顯了。

樣式、結構及公共函數如下：

代碼如下:
 <style>
        #container {width:500px;height:100px;border:1px #d1d1d1 solid;position:relative;}
        #drag {width:100px;height:100px;background:#369;position:absolute;left:0;top:0;}
    </style>
<div id="container">
<div id="drag"></div>
</div>

    <script type="text/javascript">
        function $(id) {
            return typeof id == 'string' ? document.getElementById(id) : id;
        }
        function getStyle(el,styleProp){
            return el.currentStyle ? el.currentStyle[styleProp] : document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
        }
    </script>

首先，從最簡單的入手：設定開始位置和結束位置及步長，每次增加固定的值，直至終止條件
代碼如下:
var timer = null;
        var begin = 0, end = 400, step = 5;
        var drag = $("drag");
        function run() {
            if((iLeft = parseInt(getStyle(drag,"left"))) < end){
                drag.style.left = iLeft + step + "px";