我想让物体运动和透明度同时实现，但是不是我想要的那种效果，哪位大神帮忙看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 20px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload= function () {
var Ali=document.getElementsByTagName('li');
for(var i=0;i<Ali.length;i++){
Ali[i].alpha=30;
Ali[i].timer=null;
Ali[i].onmouseover= function () {
startMove(this, 400,100);
};
Ali[i].onmouseout= function () {
startMove(this,200,30);
}
}
};
function startMove(obj,iTarget,iTargetSpeed) {
clearInterval(obj.timer);
var speedAlpha=0;
obj.timer=setInterval(function () {
if(obj.alpha>iTargetSpeed){
speedAlpha=-10;
}else{
speedAlpha=10;
}
if(obj.alpha==iTargetSpeed){
clearInterval(obj.timer);
}else {
obj.alpha += speedAlpha;
// alpha=alpha+speed;
obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = obj.alpha / 100;
var speed=(iTarget-obj.offsetWidth)/8;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
