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

一切都在使用淡入淡出功能（在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);
}

该一元+运算符强制将“opacity”属性解释为数字。没有它，它是一个字符串！因此，将0.2添加到字符串“0.2”会显示“0.20.2”，这是无意义的。

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

Answer 2

我无法对Pointy的解决方案发表评论，但是你可以使用淡入淡出功能来避免在减去低位数时发生的错误：

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

它不是防弹的，但它的工作原理是减去.05而不是.1，并通过加倍动画的速度来对抗它。

Answer 3

你可能想要

(agree.opacity += 0.2) > 1

而不是

(agree.opacity += 0.2) < 1

Javascript没有消失

3 个答案: