Javascript 不淡入

Question

我正在尝试使用 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);
    }
}

一切都在使用 fade 函数(在 Firefox 中)但是当我调用 show 函数时它只运行一次，然后它删除显示样式，并以 0.2 不透明度显示 div 元素。我不确定我做错了什么。

这是我遇到的问题的 jsFiddle 示例:http://jsfiddle.net/L54Aw/2/

由于某些原因，它在 Chrome 中也被破坏了(淡入淡出功能永远不会完成，因为与 js 小数减法问题有关)

Answer 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);
}

该一元 + 运算符强制将“不透明度”属性解释为数字。没有它，它就是一个字符串!因此，将 0.2 添加到 string "0.2"会得到 "0.20.2"，这是无稽之谈。

您对另一个元素所做的递减工作正常，因为减法运算符将操作数强制转换为数字。