课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么我无法显示链式动画？

来源：7-1 JS动画案例

Dengju

2016-11-16 19:33

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
ul,li{
            list-style: none;
}
ul li{
            width: 100px;
            height: 100px;
            background: #808002;
            margin-bottom: 10px;
            border: 4px solid #ccc;
            filter: alpha(opacity:50);//IE兼容
         opacity: 0.5;//Chrome兼容
         cursor: pointer;
}      
</style>
<script type="text/javascript">
window.onload=function(){
//载入滑动动效
            var ddjli=document.getElementsByTagName("li");           
            for(var i=0;i<ddjli.length;i++){
             ddjli[i].timer=null;//时间片私有化
             ddjli[i].onmouseover=function(){
             demo(this,"width",400,function(){
             demo(this,"height",400);
             });
            //demo(this,"height",400);
            //demo(this,"opacity",80);             
           };
       ddjli[i].onmouseout=function(){
        demo(this,"width",100,function(){
        demo(this,"height",100);
        });
               //demo(this,"height",100);
               //demo(this,"opacity",50);
           }; 
            }             
}
//集成封装-缓冲拉长/透明度变幻/长宽动效
function demo(obj,attr,itarget,fn){
//先清除定时器，防止迭代
clearInterval(obj.timer);
obj.timer=setInterval(function(){
   //样式获取obj的attr属性
   var icur=0;
   if(attr=="opacity"){
                    icur=Math.round(parseFloat(getStyle(obj,attr))*100);
   }else{
   icur=parseInt(getStyle(obj,attr));     
   }
   //变加速,距离差越近速度越小，缓冲效果 
var speed=(itarget-icur)/10;
//速度取整
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
if(icur==itarget){
                    clearInterval(obj.timer);                                      
}else{
if(attr=="opacity"){
                        obj.style.filter="alpha(opacity:"+icur+speed+")";
                        obj.style.opacity=(icur+speed)/100;
}else{
       obj.style[attr]=icur+speed+"px";
}
}
if(fn){
               fn();
                }
},30);
}
//样式BUG处理，解决offsetWidth漏洞问题
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
                return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
    <ul>
     <li>选项一</li>
     <li>选项二</li>
     <li>选项三</li>
    </ul>
</body>
</html>


写回答 关注

5回答

  • 慕粉3116392
    2016-11-16 21:57:12
    已采纳

    第77行的fn位置放错了。当第一个任务完成后才会执行fu方法。把if(fn){} fn(); }放在69行

    2 0

    Dengju

    还是不行，无法实现链式动画

    2016-11-16 22:29:37

    共 2 条回复 >

  • 慕粉3116392
    2016-11-21 21:10:22

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

       *{

        margin: 0px;

        padding: 0px;

       }

    ul,li{

                list-style: none;

    }

    ul li{

                width: 100px;

                height: 100px;

                background: #808002;

                margin-bottom: 10px;

                border: 4px solid #ccc;

                filter: alpha(opacity:50);//IE兼容

             opacity: 0.5;//Chrome兼容

             cursor: pointer;

    }      

    </style>

    <script type="text/javascript">

    window.onload=function(){

    //载入滑动动效

                var ddjli=document.getElementsByTagName("li");           

                for(var i=0;i<ddjli.length;i++){

                 ddjli[i].timer=null;//时间片私有化

                 ddjli[i].onmouseover=function(){

                 var g=this;

                 demo(this,{width:400,opacity:80},function(){

                 demo(g,{height:400});

                 });

                //demo(this,"height",400);

                //demo(this,"opacity",80);             

               };

           ddjli[i].onmouseout=function(){

            var g=this;

            demo(this,{width:100,opacity:50},function(){

            demo(g,{height:100});

            });

                   //demo(this,"height",100);

                   //demo(this,"opacity",50);

               }; 

                }             

    }

    //集成封装-缓冲拉长/透明度变幻/长宽动效

    function demo(obj,json,fn){

    //flag用于判断是否所有json都执行完毕


    //先清除定时器，防止迭代

    clearInterval(obj.timer);


    obj.timer=setInterval(function(){

    for(var attr in json){

       //样式获取obj的attr属性

       var icur=0;

       var flag=true;

       if(attr=="opacity"){

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

       }else{

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

       }

       //变加速,距离差越近速度越小，缓冲效果 

    var speed=(json[attr]-icur)/10;

    //速度取整

    if(speed>0){

    speed=Math.ceil(speed);

    }else{

    speed=Math.floor(speed);

    }

    //检测停止

    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";

    }

    }

                        if(flag){

                         clearInterval(obj.timer); 

                         //链式回调

    if(fn){

                       fn();

                   }

                        }

                    }

    },30);

    }

    //样式BUG处理，解决offsetWidth漏洞问题

    function getStyle(obj,attr){

    if(obj.currentStyle){

    return obj.currentStyle[attr];

    }else{

                    return getComputedStyle(obj,false)[attr];

    }

    }

    </script>

    </head>

    <body>

        <ul>

         <li>选项一</li>

         <li>选项二</li>

         <li>选项三</li>

        </ul>

    </body>

    </html>


    1 0

    Dengju

    嗯，懂了

    2016-11-22 09:54:07

    共 1 条回复 >

  • 慕粉3116392
    2016-11-21 21:08:37

    道理很简单。你把var flag=true;放在定时器外面flag就一直等于flase;

    吧var flag=true放在定时器你就行了

    0 0
  • Dengju
    2016-11-21 15:43:07
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
ul,li{
            list-style: none;
}
ul li{
            width: 100px;
            height: 100px;
            background: #808002;
            margin-bottom: 10px;
            border: 4px solid #ccc;
            filter: alpha(opacity:50);//IE兼容
         opacity: 0.5;//Chrome兼容
         cursor: pointer;
}      
</style>
<script type="text/javascript">
window.onload=function(){
//载入滑动动效
            var ddjli=document.getElementsByTagName("li");           
            for(var i=0;i<ddjli.length;i++){
             ddjli[i].timer=null;//时间片私有化
             ddjli[i].onmouseover=function(){
             var g=this;
             demo(this,{width:400,opacity:80},function(){
             demo(g,{height:400});
             });
            //demo(this,"height",400);
            //demo(this,"opacity",80);             
           };
       ddjli[i].onmouseout=function(){
        var g=this;
        demo(this,{width:100,opacity:50},function(){
        demo(g,{height:100});
        });
               //demo(this,"height",100);
               //demo(this,"opacity",50);
           }; 
            }             
}
//集成封装-缓冲拉长/透明度变幻/长宽动效
function demo(obj,json,fn){
//flag用于判断是否所有json都执行完毕
var flag=true;
//先清除定时器，防止迭代
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
   //样式获取obj的attr属性
   var icur=0;
   if(attr=="opacity"){
                   icur=Math.round(parseFloat(getStyle(obj,attr))*100);
   }else{
   icur=parseInt(getStyle(obj,attr));     
   }
   //变加速,距离差越近速度越小，缓冲效果 
var speed=(json[attr]-icur)/10;
//速度取整
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
//检测停止
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";
}
}
                    if(flag){
                     clearInterval(obj.timer); 
                     //链式回调
if(fn){
                   fn();
               }
                    }
                }
},30);
}
//样式BUG处理，解决offsetWidth漏洞问题
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
                return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
    <ul>
     <li>选项一</li>
     <li>选项二</li>
     <li>选项三</li>
    </ul>
</body>
</html>


    0 0
  • 慕粉3116392
    2016-11-21 15:25:02

    1. 代码中有2个this，第二个this的指向已经跟第一个不一样了。用var g =this 代替。

     var ddjli=document.getElementsByTagName("li");           

                for(var i=0;i<ddjli.length;i++){

                 ddjli[i].timer=null;//时间片私有化

                 ddjli[i].onmouseover=function(){

                    var g  = this;

                 demo(this,“width”,400,function(){

                 demo(g,"height",400);

                 });

                //demo(this,"height",400);

                //demo(this,"opacity",80);             

               };

    这样就行了

    2 0

    Dengju 回复Dengju

    还是不行啊，你看看我下面这个，链式动画和同时动画集成，怎么不行？

    2016-11-21 15:44:10

    共 2 条回复 >

JS动画效果

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

113931 学习 · 1443 问题

查看课程

相似问题

这段代码怎么就无法实现链式动画

回答 1

为什么编写链式动画时，获取样式里面的getComputedStyle会显示错误呢！！

回答 3

为什么我用了 var that，照样不能链式动画？

回答 1

为什么动画无法停止呢

回答 1

我的链式动画这么没有反应

回答 1

打开慕课网App查看更多内容