不透明度淡化动画 - NaN值

时间:2013-10-19 01:28:51

标签: javascript css animation

我有一个用JavaScript制作的淡入淡出动画,但数字似乎变成了NaN而且我无法解决我出错的地方。

我的淡入淡出动画就在这个功能中:

function transition_opacity(div_id,opacity,direction,fnc){
    var opacity = parseFloat(opacity);
    var IntervId = setInterval(process_transition,30);

    function process_transition(){
    console.log(opacity); //check value as it runs
        if(direction){  
            opacity = opacity +  0.1; //fade back in
        } else {    
            opacity = opacity -  0.1; //fade to transparency
        }
        div_id.style.opacity = opacity;

    if(!direction && opacity < 0.0 || direction && opacity > 1){
            clear();
        }   
    }

    function clear(){
         clearInterval(IntervId);
             if(fnc){ fnc(); }
    }
}

对透明度的淡入淡出效果很好但是渐渐恢复是出错的地方......我把这个函数称为:

var div_id='test';

function display(){
      var opacity = window.getComputedStyle(div_id).opacity;
      transition_opacity(div_id,opacity,1,0); //fade in
  }         

var opacity = window.getComputedStyle(div_id).opacity;                  
transition_opacity(div_id,opacity,0,load); //fade out

问题在于淡入,不透明度值从一开始就不是数字。我不明白为什么会出现这种情况,当它完全消失时,不透明度应该是0.0?

1 个答案:

答案 0 :(得分:1)

direction & opacity > 1

我对javascript并不熟悉,但我认为这不符合您的要求。

修改

我做了一个快速的谷歌,确实,&amp;在javascript中也是一个按位AND。