为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JS动画效果

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

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


00:16
Dengju

2016-11-16

源自：JS动画效果  7-1

关注问题 我要回答
985
操作
收起

正在回答

5 回答

慕粉3116392 回答被采纳 +3 积分
2016-11-16

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

0 回复 有任何疑惑可以回复我~
收起回答
#1

Dengju 提问者

还是不行，无法实现链式动画
2016-11-16 回复 有任何疑惑可以回复我~
慕粉3116392
2016-11-21

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


0 回复 有任何疑惑可以回复我~
收起回答
#1

Dengju 提问者

嗯，懂了
2016-11-22 回复 有任何疑惑可以回复我~
慕粉3116392
2016-11-21

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

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

0 回复 有任何疑惑可以回复我~
收起回答
Dengju 提问者
2016-11-21 
<!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 回复 有任何疑惑可以回复我~
收起回答
慕粉3116392
2016-11-21

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

           };

这样就行了

0 回复 有任何疑惑可以回复我~
收起回答
#1

Dengju 提问者

谢谢你噢，真是高手呢，这都能发现错误，真的跑起来了
2016-11-21 回复 有任何疑惑可以回复我~
#2

Dengju 提问者 回复 Dengju 提问者

还是不行啊，你看看我下面这个，链式动画和同时动画集成，怎么不行？
2016-11-21 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

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

进入课程

本课相似问答

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

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

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

1 回答为什么动画无法停止呢

1 回答我的链式动画这么没有反应
搜索更多本课相关问答

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信