Set div to hidden, then visible after time delay

问题

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>

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/

回答1:

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>

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>

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>

回答2:

setTimeout() Syntax

The setTimeout() function actually expects a function to be passed to it as opposed to a string :

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

Additionally, instead of hiding it through Javascript, you might consider just applying a CSS style to handle it being hidden by default (i.e. display: none) and then simply showing it within the body of your setTimeout() function call.

Example

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:

Try This

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

来源：https://stackoverflow.com/questions/42228423/set-div-to-hidden-then-visible-after-time-delay