缓存动画2

 1 <script>
 2     myTool.$('btn1').onclick = function () {
 3         // myTool.$('box').style.background = 'green';
 4         myTool.changeCssStyle(myTool.$('box'), 'background', 'green');
 5     };
 6 
 7     myTool.$('btn2').onclick = function () {
 8         // myTool.$('box').style.width = '1000px';
 9         myTool.changeCssStyle(myTool.$('box'), 'width', '1000px')
10     };
11 
12     changeCssStyle (eleObj, attr, value) {
13             eleObj.style[attr] = value;
14         }
15 </script>

1 console.log(myTool.getStyleAttr(box, 'width'));
2 console.log(myTool.getStyleAttr(box, 'height'));
3 console.log(myTool.getStyleAttr(box, 'border'));
4 console.log(myTool.getStyleAttr(box, 'backgroundColor'));

不需要是行内

1   getStyleAttr(obj, attr) {
2             if (obj.currentStyle) { // IE 和 opera
3                 return obj.currentStyle[attr];
4             } else {
5                 return window.getComputedStyle(obj, null)[attr];
6             }
7  }

 1 <script>
 2     window.addEventListener('load', function (ev) {
 3         var box = myTool.$('box');
 4 
 5         myTool.$('btn').addEventListener('click', function () {
 6             buffer(box, 'left', 800);
 7         });
 8 
 9         myTool.$('btn1').addEventListener('click', function () {
10             buffer(box, 'width', 800);
11         });
12     });
13 
14     /**
15      *  缓动动画函数
16      * @param {Object}eleObj
17      * @param {String}attr
18      * @param {String | Number}target
19      */
20     function buffer(eleObj, attr, target) {
21         // 1.1 先清后设
22         clearInterval(eleObj.timer);
23 
24         // 1.2 定义变量
25         var speed = 0, begin;
26 
27         // 1.2 设置定时器
28         eleObj.timer = setInterval(function () {
29             // 获取要做动画属性的初始值  parseInt字符串转数字
30             begin = parseInt(myTool.getStyleAttr(eleObj, attr));
31             console.log('begin:' + begin);
32 
33 
34             // 2.3 求出步长
35             speed = (target - begin) * 0.2;
36             speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
37 
38             // 2.4  动起来
39             eleObj.style[attr] = begin + speed + 'px';
40             eleObj.innerText = begin;
41 
42             // 2.5 清除定时器
43             if (begin === target) {
44                 clearInterval(eleObj.timer);
45             }
46         }, 20);
47     }
48 </script>