多值运动，也就是对于某个对象来说，不仅仅只是其中一个属性值在变化，而是好多个，比如宽，高，字体，透明度等等同时变化
当然了，多值运动会产生一个问题，就是定时器何时关闭的问题！当然是所有的属性值都运动到目标值了才能清理定时器，也就是等最慢的。就好比十个人一起聚餐，不能等到来一个人就开吃！
前几篇讲的都是一个元素对象中某一个属性的运动，这次讲同一个元素对象中多个属性值的缓冲运动，那么每个属性都有个终点（目标点），我们把这些属性及其目标值写成一个对象的形式，或者是json状！容易产生的问题就是上面说的，这里用了共同的速度函数，但有的属性值从100 –> 101, 有的属性值从100 –> 600，你得等耗时最长的属性值到达目标值才能关闭该obj所拥有的定时器，设计的思路就是每次执行轮询函数设置一个bStob = true;在遍历扫描json中属性的时候，只要有没到到目标值的属性，就设为false，这样定时器就不会关闭，即使有的属性值已经到达终点，此时轮询依旧会执行扫描，只不过此时该属性运动速度为0了，也不会运动了。也就是之前：
if(attr == cur) { cleartInterval(obj.timer); }
要增强为：
if (bStop) { clearInterval(obj.timer); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运动框架(四)：多值运动</title> <style type="text/css"> div { width: 100px; height: 100px; background: orange; margin: 10px; float: left; } </style> </head> <body> <div></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { var json = { width: 600, height: 200, opacity: 30 }; startMove(this, json); }; oDiv.onmouseout = function() { var json = { width: 100, height: 100, opacity: 100 }; startMove(this, json); }; function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } var speed = (json[attr] - cur) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值 bStop = false; } if (attr === 'opacity') { cur += speed; obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur / 100;//Chrome,IE } else { obj.style[attr] = cur + speed + 'px'; } } //整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了 if (bStop) { clearInterval(obj.timer);//说明所有的属性都到达了目标值 } }, 30); } </script> </body> </html>
