javascript - Set div to hidden, then visible after time delay - Stack Overflow

admin管理员组

文章数量:1348081

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>

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 pared my code to theirs and it seems like it should work!

https://jsfiddle/xxPoLyGLoTxx/51spg8d1/

• javascript
• jquery
• html
• styles
• visibility

Share Improve this question Follow edited Feb 14, 2017 at 14:22 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Feb 14, 2017 at 14:14 Kalif VaughnKalif Vaughn 35322 gold badges55 silver badges1010 bronze badges 3

• Use a function instead of a string inside setTimeout. Also, you're not calling initialSetup(); inside the fiddle. – Shilly Commented Feb 14, 2017 at 14:16
• FYI, if you go with fixed time, this effect can be achieve using pure CSS: jsfiddle/TheQueue841/867z211y – Quangdao Nguyen Commented Feb 14, 2017 at 14:27
• Very cool Quangdao Nguyen about the CSS trick – Kalif Vaughn Commented Feb 14, 2017 at 14:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Firstly your syntax is missing a }. Secondly, to follow best practice you should provide setTimeout with a function reference. Your current code will be invoked via 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 pletely 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yellow" class="box yellow"></div>

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>

Try This

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

本文标签： javascriptSet div to hiddenthen visible after time delayStack Overflow