javascript - 不透明度淡入淡出动画 - NaN 值

标签 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?

最佳答案

direction & opacity > 1

我对 javascript 不是很熟悉,但我不认为它能满足您的需求。

编辑

我快速谷歌了一下,确实,& 在 javascript 中也是按位 AND。

关于javascript - 不透明度淡入淡出动画 - NaN 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19461329/

相关文章:

javascript - 在为下一个成员运行循环之前完成任务

ios - 在 Mapbox 上动画调度标记

html - 在部分中更改背景图像不透明度

javascript - 如何根据输入的字母数填充进度条?

c++ - 在 opengl 中动画由立方体制成的模型

javascript - jQuery 自动完成不选择项目

javascript - 使用 jQuery 重试失败的 AJAX 请求的最佳方法是什么?

javascript - 如果我有 Javascript/CXF,我还需要 (Spring) MVC 吗?

javascript - fabricjs中对象的属性是什么类似于css的溢出: hidden

CSS 性能分析器?