我想让物体运动和透明度同时实现，但是不是我想要的那种效果，哪位大神帮忙看一下

源自：4-1 JS多物体动画

我想让物体运动和透明度同时实现，但是不是我想要的那种效果，哪位大神帮忙看一下

<!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>

提问者：慕函数9642432 2016-08-03 21:36

个回答

乃尧

2016-08-03 22:30:07

已采纳

动画结束条件判断有问题。修改代码如下：

<!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 && obj.offsetWidth==iTarget){
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>

0