0

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にする必要がありますか？

4

1 に答える 1