【问题标题】:Fade animation on opacity - NaN value不透明度上的淡入淡出动画 - NaN 值
【发布时间】:2013-10-19 01:28:51
【问题描述】:

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

【问题讨论】:

    标签: javascript css animation


    【解决方案1】:
    direction & opacity > 1
    

    我对 javascript 不是很熟悉,但我不认为它可以达到你想要的效果。

    编辑

    我做了一个快速的谷歌搜索,实际上 & 在 javascript 中也是按位与。

    【讨论】:

    • direction true and opacity > 1 退出区间... opacity max 毕竟是1.0 ..
    • & 在大多数计算机编程语言中通常是 and ;)
    • @Dave && 与 & 不同。 & 是一个计算两个二进制数的运算符,结果是 1,其中两个值都有一个 1。你的条件逻辑在那里变得很古怪,就好像你把方向 + 不透明度 > 1 或类似的东西一样。
    • 是的,我的错误是语法错误,但 NaN 仍然存在 &amp;&amp; 查看编辑:) 感谢您发现这一点
    • @Dave 也许这是一个浮点问题?我的意思是,如果您递减到小于 0,您可能不会在 0 处停止它。您是否尝试记录最终值?它可能是 -0.9999999 或类似的东西。 stackoverflow.com/questions/15583723/… 您是否也尝试过从 0 开始淡入,而不是从窗口中抓取它?你能不能让一个整数变量递增和递减1,然后将不透明度设置为整数/10?
    猜你喜欢
    • 1970-01-01
    • 2018-06-18
    • 2018-11-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-14
    • 2018-01-23
    • 2014-02-04
    相关资源
    最近更新 更多