(function() {

  var begin, // 开始动画的时间

    el, start, end, duration; 

  var INTERVAL = 13;

​

  function now() {

    return (new Date()).getTime();

  }

  function ease(time) {

    return time * time;

  }

​

  /**

   * 执行一步动画（更新属性）

   */

  function _animLeft() {

    var pos = (now() - begin) / duration;

    if (pos >= 1.0) {

      return false;

    }

    pos = ease(pos);

    return !!(el.style.left = (start + (end - start) * pos) + "px");

  }

​

  /**

   * 对一个DOM执行动画，left从_start到_end，执行时间为

   * _duration毫秒。

   * 

   * @param  {object} _el       要执行动画的DOM节点

   * @param  {integer} _start   left的起始值

   * @param  {integer} _end     left的最终值

   * @param  {integer} _duration  动画执行时间

   */

  function animLeft(_el, _start, _end, _duration) {

    stopped = false;

    begin = now();

    el = _el;

    start = _start;

    end = _end;

    duration = _duration || 1000;

​

    var step = function() {

      if (_animLeft()) {

        setTimeout(step, INTERVAL);

      }

    };

    setTimeout(step, INTERVAL);

  }

​

  window.animLeft = animLeft;

})();

​

animLeft(

  document.getElementById('el'),

  100,

  200

);