```javascript
//多屬性同時(shí)運(yùn)動封裝(callback用于鏈?zhǔn)竭\(yùn)動)
function animate(obj,param,callback,speedTime = 20){
//callback是接收了一個(gè)回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)需要在屬性到達(dá)目標(biāo)值時(shí)執(zhí)行
if(!!callback && !(callback instanceof Function)){//callback有值，并且又不是函數(shù)
//將時(shí)間賦值給speedTime
speedTime = callback;
//將callback置為undefined
callback = undefined;
}
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var attr in param){
//zIndex屬性不需要?jiǎng)赢?，直接賦值就可以了
if(attr === "zIndex" || attr === "display"){
obj.style[attr] = param[attr];
}else{
var current = 0;
if(attr === "opacity"){
current = getStyle(obj,attr) * 100;
}else{
current = parseInt(getStyle(obj,attr));
}
var speed = (param[attr] - current)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判斷是否所有的屬性都到達(dá)了目標(biāo) 值
if(param[attr] != current){//最少有一個(gè)沒有到達(dá)目標(biāo)值
flag = false;//flag為false表示最少有一個(gè)沒有到達(dá)目標(biāo)值
//沒有到達(dá)目標(biāo)值繼續(xù)賦值
if(attr == "opacity"){
obj.style[attr] = (current + speed)/100;
}else{
obj.style[attr] = current + speed + "px";
}
}
}
}
//上面的for in循環(huán)沒有去執(zhí)行，flag保持為true時(shí)，說明這一次的運(yùn)動過程所有的屬性都到達(dá)了目標(biāo)值
if(flag){//
clearInterval(obj.timer);
//到達(dá)目標(biāo)值，開啟鏈?zhǔn)?/p>
if(!!callback){
callback();
}
}
},speedTime);
}
//兼容ie8實(shí)現(xiàn)獲取瀏覽器渲染的一元素樣式值。
function getStyle(obj,attr){
if(!!window.getComputedStyle){//現(xiàn)代瀏覽器
return window.getComputedStyle(obj)[attr];
}
//ie8
return obj.currentStyle[attr];
}
```
多屬性同時(shí)運(yùn)動封裝(callback用于鏈?zhǔn)竭\(yùn)動)
