设置div为隐藏，延时后可见

Question

我正在尝试让黄色方块在 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/

Answer 1

setTimeout() 语法

setTimeout() 函数实际上期望传递给它的函数而不是字符串 :

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

此外，与其通过 Javascript 隐藏它，您可以考虑只应用 CSS 样式来处理它默认隐藏（即 display: none）然后简单地显示它在 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>

Answer 2

首先，您的语法缺少 }。其次，为了遵循最佳实践，您应该向 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>

Answer 3

试试这个

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

设置div为隐藏，延时后可见

Set div to hidden, then visible after time delay

html

javascript

jquery

styles

visibility