将 div 设置为隐藏，然后在延时后可见答案

【问题标题】：Set div to hidden, then visible after time delay将 div 设置为隐藏，然后在延时后可见
【发布时间】：2017-07-02 21:02:45
【问题描述】：

我试图让一个黄色方块在 X 时间后出现在黑色背景上（也许甚至在随机时间之后，但现在让我们做固定时间）。

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.visibility = 'hidden';
    setTimeout("document.getElementById('yellow').style.visibility = 'visible'", 2000);
  }

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

&lt;div id="yellow" class="box yellow"&gt;&lt;/div&gt;

此代码最初应该隐藏黄色方块，然后在 2 秒后显示它。但它不起作用。当我尝试使用按钮启动 javascript 功能时，它也不起作用。我查看了其他示例并将我的代码与他们的代码进行了比较，看起来它应该可以工作！

https://jsfiddle.net/xxPoLyGLoTxx/51spg8d1/

【问题讨论】：

在 setTimeout 中使用函数而不是字符串。此外，您没有调用 initialSetup();在小提琴里面。
仅供参考，如果你有固定的时间，这个效果可以用纯CSS来实现：jsfiddle.net/TheQueue841/867z211y
非常酷的 Quangdao Nguyen 关于 CSS 技巧

标签： javascript jquery html styles visibility

【解决方案1】：

试试这个

function initialSetup() {
            if (document.getElementById("yellow") !== null) {
                document.getElementById('yellow').style.visibility = 'hidden';
                setTimeout(function () {
                    document.getElementById('yellow').style.visibility = 'visible';
                }, 2000);
            }
        }

【讨论】：

【解决方案2】：

setTimeout() 语法

setTimeout() 函数实际上期望将一个函数而不是字符串传递给它：

setTimeout(function(){
   document.getElementById('yellow').style.visibility = 'visible'; 
}, 2000);

此外，您可以考虑应用 CSS 样式来处理默认隐藏（即display: none）而不是通过 Javascript 隐藏它，然后简单地将其显示在您的 setTimeout() 函数调用的主体中。

示例

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.visibility = 'hidden';
    setTimeout(function() {
      document.getElementById('yellow').style.visibility = 'visible';
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

<body>
  <div id="yellow" class="box yellow"></div>
</body>

【讨论】：

【解决方案3】：

首先，您的语法缺少}。其次，要遵循最佳实践，您应该向setTimeout 提供函数参考。您当前的代码实际上是通过eval() 运行的，应该不惜一切代价避免。第三，你需要使用backgroundColor，而不是color，来设置元素背景。最后，你不要在任何地方打电话给intitialSetup()。考虑到这些问题，试试这个：

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.backgroundColor = 'black';
    setTimeout(function() {
      document.getElementById('yellow').style.backgroundColor = 'yellow'
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

&lt;div id="yellow" class="box yellow"&gt;&lt;/div&gt;

请注意，使用这种逻辑，您并没有隐藏黄色的div - 正如您的标题所暗示的那样。只是因为你改变了它的背景颜色以匹配body 的黑色背景，所以它不是很明显。如果要使元素完全不可见，请使用display 属性。您也可以在 CSS 中设置它以避免页面加载时出现 FOUC：

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    setTimeout(function() {
      document.getElementById('yellow').style.display = 'block';
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

&lt;div id="yellow" class="box yellow"&gt;&lt;/div&gt;

最后，这是上述问题的 jQuery 实现，因为您已将问题标记为：

$(function() {
  setTimeout(function() {
    $('#yellow').show()
  }, 2000);
});

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yellow" class="box yellow"></div>

【讨论】：

谢谢，它的工作原理与上面的关键帧 CSS 技巧一样。因此，看来我只需要调用该函数（我认为这是在 Jsfiddle 中自动 onload 完成的，但猜测不是），然后在 setTimeout 中使用另一个函数而不是字符串。非常感谢您的帮助。