缓存动画4-回调

 <script>
       window.addEventListener('load', function (ev) {
           var box = myTool.$('box');

           myTool.$('btn').addEventListener('click', function () {
               buffer(box, { 'left': 900, 'top': 500, 'width': 600, 'height': 400}, function () {
                   buffer(box, { 'left': 100, 'top': 100, 'width': 50, 'height': 50}, function () {
                       buffer(box, { 'left': 600, 'top': 500, 'width': 300, 'height': 400}, null)
                   });
               });
           });
       });

       /**
        *  缓动动画函数
        * @param {Object}eleObj
        * @param {Object}json
        * @param {Function}fn
        */
       function buffer(eleObj, json, fn) {
           // 1.1 先清后设
           clearInterval(eleObj.timer);

           // 1.2 定义变量
           var speed = 0, begin = 0, target = 0, flag = false;

           // 1.3 设置定时器
           eleObj.timer = setInterval(function () {
               // 标志 (标签的所有属性有没有执行完动画)
               flag = true;
               for(var key in json){
                   // 获取要做动画属性的初始值
                   begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
                   target = parseInt(json[key]);
                   console.log('begin:' + begin);

                   // 2.3 求出步长
                   speed = (target - begin) * 0.2;
                   speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);

                   // 2.4  动起来
                   eleObj.style[key] = begin + speed + 'px';

                   // 2.5 判断
                   if (begin !== target) {
                       flag = false;
                   }
               }

               // 1.4 清除定时器
               if(flag){
                   clearInterval(eleObj.timer);   //解决了只要一个值满足就可以的情况
                   // 开启另一组动画
                  /* if(fn){
                       fn();
                   }*/
                  fn && fn();
               }
           }, 40);
       }
   </script>