js实现jquery函数animate动画效果

<script>

function animate(obj, json, interval, sp, fn) {
clearInterval(obj.timer);
function getStyle(obj, arr) {
if(obj.currentStyle){
return obj.currentStyle[arr]; //针对ie
} else {
return document.defaultView.getComputedStyle(obj, null)[arr];
}
}


/* function getStyle(dom, pro) {
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[pro]
} else {
if (dom.currentStyle) {
return dom.currentStyle[pro]
} else {
return dom.style[pro]
}
}
}*/



obj.timer = setInterval(function(){

var flag = true;

for(var arr in json) {
var icur = 0;
if(arr == "opacity") {
icur = Math.round(parseFloat(getStyle(obj, arr))*100);
} else {
icur = parseInt(getStyle(obj, arr));
}
var speed = (json[arr] - icur) * sp;
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
if(icur != json[arr]){
flag = false;
}
if(arr == "opacity"){
obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
obj.style.opacity = (icur + speed)/100;
}else {
obj.style[arr] = icur + speed + "px";

}
//console.log(j + "," + arr +":"+ flag);
}

if(flag){
clearInterval(obj.timer);
//console.log(j + ":" + flag);
//console.log("k = " + k);
//console.log("j = " + j);
//console.log("DONE");
if(fn){ fn(); }
}
},interval);
}

</script>
<ul id="move" style="list-style:none;font-family:'Arial';color:White">
<li style="width:200;height:60;background-color:red">AAAAA</li>
<li style="width:200;height:60;background-color:blue">BBBBB</li>
<li style="width:200;height:60;background-color:Navy">CCCCCC</li>
<li style="width:200;height:60;background-color:green">DDDDDD</li>
<li style="width:200;height:60;background-color:pink">EEEEE</li>
</ul>
<script>
var move = document.getElementById("move").getElementsByTagName("li");
for(var i = 0; i < move.length; i ++){
move[i].onmouseover = function(){
var _this = this;
animate(_this, {width: 500, height: 60},10, 0.1, function(){
// animate(_this, {width: 200, height: 100},10, 0.1);
});
}

move[i].onmouseout = function(){
animate(this, {width: 200, height: 60},10, 0.1);
}
}

</script>