为什么添加了多个动画,后面的链式函数没执行啊??????

来源:5-1 JS链式动画

Danni11

2017-09-20 22:48

<script>
function getStyle(obj,attr) {
   if(obj.currentStyle){
       return obj.currentStyle[attr];
   }else{
       return getComputedStyle(obj,false)[attr];
   }
}//封装一个方法去获得任何一个属性值,同时方法要考虑兼容

function startMove(obj,arrt,iTarget,fn) {
   clearInterval(obj.timer);
   obj.timer=setInterval(function () {
       //1、判断属性值里是否有透明度,如有的话小数点和像素怎么处理
       var icur=0;
       if(arrt=='opacity'){
           icur=Math.round(parseFloat(getStyle(obj,arrt))*100);
       }else{
           icur=parseInt(getStyle(obj,arrt));
       }
       //2、算速度,速度=目标-参数m/h,并取整数
       var speed=(iTarget-icur)/8;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);
       //检测停止、得出透明度、得出其他值
       if (icur==0){
           clearInterval(obj.timer);
           if(fn){
               fn();
           }
       }else{
           if (arrt=='opacity'){
               obj.style.filter='alpha:(opacity:'+icur+speed+')';
               obj.style.opacity=(icur+speed)/100;
           }else {
               obj.style[arrt]=icur+speed+'px';
           }
       }
   },30)
}

///////    以上是一个框架   ///////
window.onload=function () {
   var Li=document.getElementById('li1');
   Li.onmouseover=function () {
       startMove(Li,'height',200,function(){
           startMove(Li,'width',400,function(){
               startMove(Li,'opacity',100);
           })
       })
   }
}

写回答 关注

3回答

  • 万恶的岛主
    2017-10-18 10:24:19

    attr 与 arrt  

  • 又报错了T_T
    2017-09-21 14:59:55

       if (icur==iTarget){   //判断条件是到达目标  而不是==0

               clearInterval(obj.timer);

               if(fn){

                   fn();

               }


  • 慕盖茨6243357
    2017-09-21 14:56:26

    你调用封装的框架没看看!

JS动画效果

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

113920 学习 · 1494 问题

查看课程

相似问题