1

我正在尝试使用 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 小数减法问题有关，fade 函数永远不会完成）

4

3 回答 3

4

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

您还在 JavaScript 中遇到了一个怪异，它与+and-运算符之间的显着差异有关。减法总是数字，但加法不是！

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

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到字符串“0.2”会得到“0.20.2”，这是无稽之谈。

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

于 2013-09-12T22:39:53.873 回答
1

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

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

它不是防弹的，但它通过减去 0.05 而不是 0.1 并通过将动画速度加倍来对抗它。

于 2013-09-12T23:13:07.677 回答
0

你可能想要

(agree.opacity += 0.2) > 1

代替

(agree.opacity += 0.2) < 1
于 2013-09-12T22:27:20.087 回答