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

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

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

慕函数9642432

2016-08-03 21:36

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

写回答关注

1回答

乃尧

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>
1 0

慕函数964...

非常感谢！

2016-08-05 14:24:03

共 1 条回复 >

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113923 学习 · 1443 问题

查看课程

相似问题

如何将更改透明度和变换高度同时作用在\多物体运动\上，求各位大神帮帮忙，看我哪里错了

回答 4

综合了透明和多物体运动效果但是还是有点问题能帮我看一下吗？

回答 3

回答 2

回答 2

回答 3