将div设置为隐藏，延时后可见 [英] Set div to hidden, then visible after time delay

问题描述

我试图在 X 时间后(甚至在随机时间后，但现在让我们只做固定时间)在黑色背景上出现一个黄色方块.

I'm trying to have a yellow square appear on a black background after X amount of time (perhaps even after a random amount of time, but for now let's just do fixed time).

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 功能时，它也不起作用.我查看了其他示例并将我的代码与他们的代码进行了比较，看起来它应该可以工作！

This code should hide the yellow square initially, then reveal it after 2 seconds. But it does not work. It also does not work when I try to use a button to initiate the javascript function. I've looked at other examples and compared my code to theirs and it seems like it should work!

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

推荐答案

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

Firstly your syntax is missing a }. Secondly, to follow best practice you should provide setTimeout with a function reference. Your current code which actually be run through eval() which should be avoided at all costs. Thirdly, you need to use backgroundColor, not color, to set the element background. Lastly, you don't call intitialSetup() anywhere. With those issues in mind, try this:

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:

Note that with this logic you're not making the yellow div hidden - as your title implies. It's only not immediately obvious as you've changed its background colour to match the black background of the body. If you want to make the element completely invisible, use the display property. You can also set it in CSS to avoid a FOUC when the page loads:

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 实现，因为您已将问题标记为:

Finally, here's a jQuery implementation of the above as you've tagged the question as such:

$(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>

这篇关于将div设置为隐藏，延时后可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！