Javascript不会淡入

我尝试使用vanilla.js而不是jQuery来创建淡入淡出的效果。我使用以下代码创建隐藏和显示效果：

document.getElementById("pic-num-submit").onclick = function() {
    fade();
};

var home = document.getElementById('home').style;
    home.opacity = 1;
var agree = document.getElementById('agree').style;
    agree.opacity = 0;
    agree.display = "none";

function fade() {
    if((home.opacity -= .1) < 0) {
        home.display = "none";
        show();
    }
    else {
        setTimeout(fade, 40);
    }
}

function show() {
    if((agree.opacity += 0.2) < 1) {
        agree.display = "";
    }
    else {
        setTimeout(show, 40);
    }
}

document.getElementById（“pic num submit”）.onclick=function（）{
褪色（）；
};
var home=document.getElementById（'home'）.style；
home.opacity=1；
var agree=document.getElementById（'agree'）.style；
同意。不透明度=0；
agree.display=“无”；
函数fade（）{
如果（（home.opacity-=.1）<0）{
home.display=“无”；
show（）；
}
否则{
设置超时（淡入淡出，40）；
}
}
函数show（）{
如果（（同意不透明度+=0.2）<1）{
同意。显示=”；
}
否则{
设置超时（显示，40）；
}
}

在Firefox中，淡入淡出功能可以正常工作，但当我调用show函数时，它只运行一次，然后它会删除显示样式，并以0.2的不透明度显示div元素。我不确定我做错了什么

下面是我遇到的问题的一个JSFIDLE示例：

此外，由于某些原因，它在Chrome中被破坏（由于与js十进制减法问题有关，淡入淡出功能从未完成）

您可能需要

(agree.opacity += 0.2) > 1

而不是

(agree.opacity += 0.2) < 1

（agree.opacity+=0.2）<1

您可能需要

(agree.opacity += 0.2) > 1

而不是

(agree.opacity += 0.2) < 1

（agree.opacity+=0.2）<1

您的“显示”功能不正确。仅当不透明度不小于1时设置计时器。最初是这样，因此代码只运行一次

在JavaScript中，您还遇到了一个奇怪的问题，这与

+

和

-

操作符之间的显著差异有关。减法永远是数字，但不是加法

这是一个有效的“显示”功能：

function show() {
  agree.display = ""; // only need this the first time anyway
  agree.opacity = +(agree.opacity) + 0.2;
  if (agree.opacity <= 1)
    setTimeout(show, 40);
}

函数显示（）{
agree.display=”“；//无论如何，只在第一次使用此选项
agree.opacity=+（agree.opacity）+0.2；
如果（agree.opacity您的“show”函数不正确。您只在不透明度不小于1时设置计时器。最初是这样，因此代码只运行一次

在JavaScript中，您还遇到了一个奇怪的问题，即
+
和
-
运算符之间存在显著差异。减法总是数字的，但加法却不是

这是一个有效的“显示”功能：

function show() {
  agree.display = ""; // only need this the first time anyway
  agree.opacity = +(agree.opacity) + 0.2;
  if (agree.opacity <= 1)
    setTimeout(show, 40);
}

函数显示（）{
agree.display=”“；//无论如何，只在第一次使用此选项
agree.opacity=+（agree.opacity）+0.2；
如果（agree.opacity我不能对Pointy的解决方案发表评论，但下面是使用淡入淡出功能可以避免在减去低数值时出现的错误：

function fade() {
    home.opacity -= .05;
    if(home.opacity - .05 < 0) {
        home.display = "none";
        show();
    }
    else {
        setTimeout(fade, 20);
    }
}

函数淡入淡出（）{
home.opacity-=.05；
如果（home.opacity-.05<0）{
home.display=“无”；
show（）；
}
否则{
设置超时（淡入淡出，20）；
}
}

它不是防弹的，但它通过减去.05而不是.1来工作，并通过加倍动画的速度来抵消它。
我不能对Pointy的解决方案发表评论，但下面是使用淡入淡出功能可以避免在减去低数字时发生的错误：

function fade() {
    home.opacity -= .05;
    if(home.opacity - .05 < 0) {
        home.display = "none";
        show();
    }
    else {
        setTimeout(fade, 20);
    }
}

函数淡入淡出（）{
home.opacity-=.05；
如果（home.opacity-.05<0）{
home.display=“无”；
show（）；
}
否则{
设置超时（淡入淡出，20）；
}
}

它不是防弹的，但它是通过减去.05而不是.1来工作的，并通过将动画速度加倍来抵消它。
这是我开始编写代码时的想法。但它不起作用（JSFIDLE上的一个示例：）这是我开始编写代码时的想法。但它不起作用（JSFIDLE上的一个示例：）对于chrome，使用.toFixed（）方法这在Firefox中为我做了一些非常奇怪的事情。对于chrome，使用.toFixed（）方法这在Firefox中为我做了一些非常奇怪的事情。非常感谢！！您的解释让我很容易理解：）再次感谢你！没问题。这让我困惑了一段时间！非常感谢！！你的解释让我很容易理解：）再次感谢你！没问题。这让我困惑了一段时间！