                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

按照JS动画课程改了下链式动画，但为什么这个会无法执行？只有第一组的width能够运动，后面的都不行，这是为什么？

<!doctype html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

ul,li{

list-style: none;

}

ul li {

width: 200px;

height: 100px;

background:yellow;

margin-bottom: 20px;

border: 4px solid #000;

filter: alpha(opacity: 30);

opacity: 0.3;

}

</style>

</head>

<body>

<ul>

</ul>

window.onload = function(){

var Li = document.getElementById("li1");

Li.onmouseover = function(){

//startMove(oLi,{width:400,height:200,opacity:100});

//function startMove(obj,json,fn);

startMove(Li,{width:400},startMove(Li,{height:200},startMove(Li,{opacity:100})));

};

Li.onmouseout = function(){

}

</script>

</body>

</html>

陈大鱼头

2016-04-12

源自：JS动画效果 6-2

关注问题我要回答

824

操作

收起

3 回答

从此浪迹天涯了无牵挂回答被采纳 +3 积分
2016-04-18

你试一下把move.js里面的var flag = true；挪动到定时器里面。因为链式调用，如果调用结束第一个，

if(icur !== json[attr]){

flag=false;

}

if(attr=='opacity'){

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

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

}

else{

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

}

这里因为没办法使定时器停止，因为没有flag=true；之前的flag=true有但是是在定时器外面，你本身在定时器里面出不去，所以没办法停止只能无限循环，不过，看不出来循环，因为这时候speed=0，所以也就是变化的不变。

要想进行下一个调用，唯一的办法就是在定时器一开始，给flag设定为true。

因为你后面有icur !== json[attr]的判断，所以，只要你目标值跟当前值不同的话，在中间还能矫正回来，就不会造成意外的中断。

3 回复有任何疑惑可以回复我~

收起回答

陈大鱼头提问者

非常感谢！

2016-04-27 回复有任何疑惑可以回复我~

慕用9727068
2016-04-26

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
   <title>5.链式动画</title>
</head>
<style type="text/css">
*{
   margin: 0 0;
   padding: 0 0;
}
ul,li{
   list-style: none;
}
ul li{
   width: 200px;
   height: 100px;
   background:yellow;
   margin-bottom:20px;
   border:4px solid #000;
   filter:alpha(opacity:30);
   opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function(){
   var Li1=document.getElementById("li1");
   Li1.onmouseover=function(){
       startMove(Li1,"width",400,function(){
           startMove(Li1, 'height', 200)
       })
   }
   Li1.onmouseout=function(){
       startMove(Li1, "width",200,function(){
           startMove(Li1, 'height', 100)
       })
   }
}
var timer=null;
function startMove(obj,attr,iTarget,fn){
   clearInterval(obj.timer)
   obj.timer =setInterval(function(){
       var icur=0;
       if (attr=='opacity') {
           icur=Math.round(parseFloat(getStyle(obj,attr))*100)
       }
       else{
           icur=parseInt(getStyle(obj,attr));
       }
       if (icur>iTarget) {
           speed=Math.floor((iTarget-icur)/10)
       }
       else{
           speed=Math.ceil((iTarget-icur)/10)
       }
       if(icur==iTarget){
           clearInterval(obj.timer)
           if (fn) {
               fn();
           }
       }
       else{
           if (attr=='opacity') {
               obj.style.filter='alpha(opacity:'+(icur+speed)+')'
               obj.style.opacity=(icur+speed)/100;
           }
           else{
               obj.style[attr]=icur+speed+'px';
           }
       }
   },30)
}
function getStyle(obj,attr){
   if (obj.currentStyle) {
       return obj.currentStyle[attr];
   }
   else{
       return getComputedStyle(obj,false)[attr];
   }
}
</script>
<body>
   <ul>
       <li id="li1"></li>
   </ul>
</body>
</html>