同时执行透明度和宽度改变的问题

来源:4-1 JS多物体动画

纪奕滨

2015-09-04 10:47


window.onload=function(){

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

    for (var i = li.length - 1; i >= 0; i--) {

    li[i].timer=null;

        li[i].alpha=100;

    li[i].onmouseover=function(){

    startMove(this,400);

    startopacity(this,30);

    }

    li[i].onmouseout=function(){

    startMove(this,200);

    startopacity(this,100);

    }

    };

}

function startMove(obj,iTarget){

clearInterval(obj.timer);

obj.timer=setInterval(function(){

         var speed=(iTarget-obj.offsetWidth)/8;

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

         if(obj.offsetWidth==iTarget){

          clearInterval(obj.timer);

         }else{

         obj.style.width=obj.offsetWidth+speed+'px';

     }

},30)


}


function startopacity(obj,iTarget){

var speed=0;

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

        if(obj.alpha>iTarget){

        speed=-10;

        }else{

        speed=10;

        }

        if(obj.alpha==iTarget){

        clearInterval(obj.timer);

        }else{

            obj.alpha+=speed;

        obj.style.opacity=obj.alpha/100;

        }

    },30)   

}

上面是我的js代码,这样执行的话只执行透明度的变化,然而把最后一个方法的代码删除就能执行宽度的变化,怎么样才能同时执行两个变化

写回答 关注

2回答

  • 22不小了
    2015-10-15 22:59:43

    你两个方法用的是同一个定时器相互争抢干扰缩写为一个方法, 同时注意if语句的判别 这个判断有些不好处理。可以设置执行的次数。当次数达到以后全部清空定时器。

  • 悟道参禅
    2015-09-09 14:57:29

    放在同一个方法里,同一个定时器试下

JS动画效果

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

113931 学习 · 1443 问题

查看课程

相似问题