//以下是老师封装的函数，其余的css代码自己写就好了

function startMove(obj,json,fn) {

/*

obj为要改变的元素对象

json为属性/值对，即要改变的属性和值。用于同步运动

fn为回调函数，用于设置链式运动

*/

// 首先清除定时器

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

//对于同时改变元素多个属性值的情况

for(var attr in json)

{

//获取属性值

var icur=0;   //初始化属性值为0

if(attr=="opacity")

{

//获取的透明度为小数（0-1），首先转化为百分制（0-100），然后四舍五入取整

icur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

icur=parseInt(getStyle(obj,attr));

}

// 判断所有属性值是否都达到目标值，一个未达到，即为false

if(icur!=json[attr])

{

flag=false;

}

//设置属性改变的速度

var speed=0;

speed=(json[attr]-icur)/4;   //4为参数，可为任意值，越小改变速度越快

speed=speed>0?Math.ceil(speed):Math.floor(speed);  //取整

//改变属性值

if(attr=="opacity")

{

obj.style.filter="alpha(opacity:"+(icur+speed)+")";

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+"px";

}

}

//待改变的属性值同时完成一次改变后，判断是否都达到目标值

if(flag)

{

clearInterval(obj.timer);

// 如果存在回调函数，则调用之

if(fn)

{

fn();

}

}

},30) 

}

// 获取css样式

function getStyle(obj,attr) {

if(obj.currentStyle)

{

return obj.currentStyle[attr];   //IE8

}else{

return getComputedStyle(obj,false)[attr];  //IE 9 10 11支持  别人测试

}

}