以下是代码（问题在注释中，麻烦仔细看看），求大神帮忙解决，感激不尽：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
body,div{margin:auto;padding:0px;}
#div{width:200px;height:200px;background-color:blue;opacity:0.6;position:relative;left:0px;top:0px;margin-left:0px;}
#btn{position:fixed;left:50%;top:50%;margin-left:-30px;margin-top:20px;}
</style>
<div id='div'></div>
<button id='btn'>开始动画</button>
<script>
// 获取元素
function $id(id){
return document.getElementById(id);
}
// 计算样式值
function $gs(ele,attr){
if (ele.style[attr]!==''){
return ele.style[attr];
}else{
if (window.getComputedStyle(ele,null)[attr]!=='auto'){
return window.getComputedStyle(ele,null)[attr];
}else{
return 0;
}
}
}
// 多属性动画函数
// ele 元素
// time 动画持续时间
// json 存放改变的属性对象
// fn 回调函数
// delay 是否延迟执行动画
function animate(ele,time,json,fn,delay){
if (ele.timer!==undefined && ele.timer!==null) return ;
window.setTimeout(function(){
var startTime=new Date().getTime();
// 存放每个属性相关变化量的数组
var vals=[];
// 动画流畅度
var fps=60/1000;
for (var attr in json)
{
var startVal=(attr.search('opacity')!==-1) ? parseFloat($gs(ele,attr)) : parseInt($gs(ele,attr));
var endVal=startVal+json[attr];
var unit=(attr.search('opacity')!==-1) ? '' : 'px';
vals.push({attr:attr,chg:json[attr],startVal:startVal,endVal:endVal,unit:unit});
}
// 开始动画
function start(){
var endTime=new Date().getTime();
// 当超过给定的运行时间的时候停止动画
if (endTime-startTime>=time){
window.clearTimeout(ele.timer);
ele.timer=null;
for (var i=0;i<vals.length;++i)
{
ele.style[vals[i]['attr']]=vals[i]['endVal']+vals[i]['unit'];
}
// 若有回调函数，则执行
if (fn!==undefined && typeof fn==='function'){
fn();
}
}else{
for (var i=0;i<vals.length;++i)
{
var speed=vals[i]['chg']*((endTime-startTime)/time);
ele.style[vals[i]['attr']]=vals[i]['startVal']+speed+vals[i]['unit'];
}
ele.timer=window.setTimeout(start,1/fps);
}
}
start();
},(delay===undefined) ? 0 : delay);
}
function doit(){
startAni();
}
function startAni(){
// width:200 中 200这里是变化量
animate($id('div'),1000,{width:200,height:200,opacity:-0.5,left:200,top:200},function(){
animate($id('div'),1000,{width:-200,height:-200,opacity:0.5,left:-200,top:-200},doit,500);
},1000);
// 如上面的参数：现在就固定研究一个width属性。
//一开始width属性值200，第一次指定动画的时候变化为400，第二次执行动画的时候有变回200，接下去就如此循环：200->400->200->400->200....。
// 实际本该如此的，可是实际运行的时候，他就不在指定的范围值停止动画！！！这个怎么解决？？求大神空降！！
}
// 点击按钮开始动画
$id('btn').onclick=startAni;
</script>
</body>
</html>此问题已解决....... 都是 初心 惹的祸啊