在不透明度上淡化动画 - NaN 值

Fade animation on opacity - NaN value

本文关键字：NaN 动画 不透明度      更新时间：2023-09-26

我有一个用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？

direction & opacity > 1

我对javascript不是很熟悉，但我认为它不能做到你想要的。

编辑

我做了一个快速的谷歌，事实上，在javascript中也是一个按位的AND。

相关文章：