代码如下，不知道为什么不会执行改变高度和透明度的动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{ height: 200px; width: 200px; position: absolute; background: #999; left: 10px; top:0px; opacity: .8; filter: alpha(opacity:80);}
button{ position: relative; top:300px; }
</style>
</head>
<body>
<div id="box"></div>
<button type="button">移动</button>
<script type="text/javascript">
window.onload=function(){
function getStyle(obj,className){
var val=(obj.currentStyle? obj.currentStyle[className]:getComputedStyle(obj,false)[className]);
if(className=="opacity"){
val=Math.round(parseFloat(val)*100);
}
return parseInt(val);
}
/*-----move函数--------*/
move=function(obj,json_move,move_time){
clearInterval(obj.timer);
if(!obj.arr){
obj.arr=[];
}
function add(){
if(arguments.length>0){
obj.arr.push(arguments);
}
return add;
}
var time=null;
var selt={
"fast":600,
"normal":800,
"slow":2200
}
switch (typeof move_time){
case "string":
if(selt.hasOwnProperty(move_time)){
time=selt[move_time];
}else{
time=selt[normal];
};
break;
case "number":
time=move_time;
break;
default:
time=selt[normal];
break;
}
var n=0;
var count=parseInt(time/30);
var start={};
var dis={};
for(var key in json_move){
start[key]=getStyle(obj,key);
dis[key]=json_move[key]-start[key];
}
obj.timer=setInterval(function(){
n++;
for(var key in json_move){
if(key=="opacity"){
obj.style.opacity=(start[key]+dis[key]/count*n)/100;
obj.style.filter="alpha(opacity:"+start[key]+dis[key]/count*n+")";
}else{
obj.style[key]=start[key]+dis[key]/count*n+"px";
}
if(n==count){
clearInterval(obj.timer);
if(obj.arr.length!=0){
console.log("----------------");
console.log(obj.arr);
var temp=obj.arr.shift();
console.log(temp);
console.log(obj.arr);
console.log("-----------------");
move(obj,temp[0],temp[1]);
}
}
}
},30);
return add;
}
/*-----------------------*/
/*----------------------*/
var m_div=document.getElementById("box");
var m_btn=document.getElementsByTagName("button")[0];
m_btn.onclick=function(){
move(m_div,{"left":300},1000)({"width":400},1000)({"top":400, "opacity":50},2000)({"height":0,"opacity":80},1000);
}
}
</script>
</body>
</html>
obj.timer = setInterval(function () {
n++;
for (var key in json_move) {
if (key == "opacity") {
obj.style.opacity = (start[key] + dis[key] / count * n) / 100;
obj.style.filter = "alpha(opacity:" + start[key] + dis[key] / count * n + ")";
} else {
obj.style[key] = start[key] + dis[key] / count * n + "px";
}
}
//放出来，放里面因为你上一次操作有2个属性要设置，会导致执行2次这个代码
//第一次执行设置top属性时已经更新了最后一个动作的timer句柄，第二次for设置opacity属性时这个代码直接干掉了新启动的timer
if (n == count) {
clearInterval(obj.timer);///
if (obj.arr.length != 0) {
console.log("----------------");
console.log(obj.arr);
var temp = obj.arr.shift();
console.log(temp);
console.log(obj.arr);
console.log("-----------------");
move(obj, temp[0], temp[1]);
}
}
/////////////////////////////////
}, 30);
动画自己写？为什么不用JQuery？