链式运动的回调函数不执行

来源:5-1 JS链式动画

CLING_AMY

2016-12-10 13:44

回调函数不执行是为什么啊

写回答 关注

2回答

  • CLING_AMY
    2016-12-10 17:51:27

    <html xmlns="http://www.w3.org/1999/xhtml">    

    <head>    

    <meta charset="UTF-8"/>    

    <meta name="Generator" content="EditPlus®"/>    

    <meta name="Author" content=""/>    

    <meta name="Keywords" content=""/>    

    <meta name="Description" content=""/>    

    <title>Document</title>    

    <style type="text/css">    

    /* css默认样式重置 */    

    body,p,h1,h2,h3,ul,li{margin:0;padding:0;font-size:12px;}    

    ul{list-style:none;}    

    a{text-decoration:none;}    

    img{border:none;vertical-align:top;}    

    li{width:200px;height:100px;background:yellow;margin-bottom:20px;border:4px solid black;filter:alpha(opacity:30);opacity:0.3;}    

    </style>    

    <script type="text/javascript">    

    window.onload=function(){    

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

    Li.onmouseover=function(){    

    startMove(Li,"width",400,function(){    

    startMove(Li,"height",200,function(){    

    startMove(Li,"opacity",100);});    

    });    

    }    

    Li.onmouseout=function(){    

    startMove(Li,"opacity",30,function(){    

    startMove(Li,"height",100,function(){    

    startMove(Li,"width",200);});    

    });    

    }    

    function startMove(obj,att,iTarget,fn){    

    clearInterval(obj.timer);    

    obj.timer=setInterval(function(){    

    var icur=0;    

    if(att=="opacity"){    

    icur=Math.round(parseFloat(getStyle(obj,att))*100);    

    }else{    

    icur=parseInt(getStyle(obj,att));    

    }    

    var speed=(iTarget-icur)/8;    

    speed=speed>0?Math.ceil(speed):Math.floor(speed);    

    if(obj.icur==iTarget){    

    clearInterval(obj.timer);    

    fn && fn();//回调函数    

    }else{    

    if(att=="opacity"){    

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

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

    }else{    

    obj.style[att]=icur+speed+"px";}    

    }    

    },30);    

    }    

    function getStyle(obj, attr){    

    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];    

    }    

    }    

    </script>    

    </head>    

    <body>    

    <ul>    

    <li id="li1"></li>    

    </ul>    

    </body>    

    </html>    


  • 飞向银河系
    2016-12-10 14:46:03

    你在startMove函数里面做过对回调函数的定义么?把代码贴出来看下

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题