将 div 设置为隐藏，然后在延时后可见
Posted
技术标签:
【中文标题】将 div 设置为隐藏，然后在延时后可见【英文标题】：Set div to hidden, then visible after time delay 【发布时间】：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;
<div id="yellow" class="box yellow"></div>此代码最初应该隐藏黄色方块，然后在 2 秒后显示它。但它不起作用。当我尝试使用按钮启动 javascript 功能时，它也不起作用。我查看了其他示例并将我的代码与他们的代码进行了比较，看起来它应该可以工作！
https://jsfiddle.net/xxPoLyGLoTxx/51spg8d1/
【问题讨论】：
在 setTimeout 中使用函数而不是字符串。此外，您没有调用 initialSetup();在小提琴里面。 仅供参考，如果你有固定的时间，这个效果可以用纯CSS来实现：jsfiddle.net/TheQueue841/867z211y 非常酷的 Quangdao Nguyen 关于 CSS 技巧 【参考方案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;
<div id="yellow" class="box yellow"></div>请注意，使用这种逻辑，您并没有隐藏黄色的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;
<div id="yellow" class="box yellow"></div>最后，这是上述问题的 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 中使用另一个函数而不是字符串。非常感谢您的帮助。以上是关于将 div 设置为隐藏，然后在延时后可见的主要内容，如果未能解决你的问题，请参考以下文章