javascript - CSS 隐藏和可见属性一直在变化

Question

我有以下网站:

window.onload = function() {
  var executed = false;
  if (!executed) {
    document.getElementById("at").style.visibility = "visible";
    setInterval(function() {
      document.getElementById("t-ground").style.visibility = "visible";
      document.getElementById("ground").style.opacity = "0.3";
      setInterval(function() {
        document.getElementById("right-top").style.visibility = "visible";
        document.getElementById("t-ground").style.visibility = "hidden";
        document.getElementById("ground").style.opacity = "1.0";
        document.getElementById("t-plant").style.visibility = "visible";
        document.getElementById("hand").style.opacity = "0.3";
        setInterval(function() {
          document.getElementById("right-bot").style.visibility = "visible";
          document.getElementById("hand").style.opacity = "1.0";
          document.getElementById("t-plant").style.visibility = "hidden";
          document.getElementById("ab").style.visibility = "visible";
          document.getElementById("t-animal").style.visibility = "visible";
          document.getElementById("animal").style.opacity = "0.3";
          setInterval(function() {
            document.getElementById("left-bot").style.visibility = "visible";
            document.getElementById("animal").style.opacity = "1.0";
            document.getElementById("t-animal").style.visibility = "hidden";
            document.getElementById("t-human").style.visibility = "visible";
            document.getElementById("human").style.opacity = "0.3";
            setInterval(function() {
              document.getElementById("left-top").style.visibility = "visible";
              document.getElementById("t-human").style.visibility = "hidden";
              document.getElementById("human").style.opacity = "1.0";
              document.getElementById("logo-mid").style.display = "none";
              setInterval(function() {
                document.getElementById("about-text").style.display = "inline";
                document.getElementById("text-div").style.overflowY = "scroll";
                document.getElementById("at").style.visibility = "hidden";
                document.getElementById("ab").style.visibility = "hidden";
                document.getElementById("right-top").style.visibility = "hidden";
                document.getElementById("right-bot").style.visibility = "hidden";
                document.getElementById("left-bot").style.visibility = "hidden";
                document.getElementById("left-top").style.visibility = "hidden";
                executed = true;
              }, 1725);
            }, 2125);
          }, 2125);
        }, 2125);
      }, 2125);
    }, 2125);
  }
}

html {
  font-family: "Verdana", Geneva, sans-serif;
  font-size: 14px;
}

body {
  padding-top: 10px;
  margin: auto;
  background-color: #FFFFFF;
  width: 1100px;
}

hr {
  border-top: 1px dotted #747737;
}

.title {
  text-align: center;
  padding-bottom: 20px;
}

.wrapper {
  margin: auto;
}

#text-div {
  height: 496px;
  width: 450px;
  border-top: 1px solid #747737;
  border-bottom: 1px solid #747737;
  box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 1);
  margin-top: -4px;
}

.about-text {
  margin-left: 25px;
  margin-right: 25px;
  width: 350px;
  height: 472px;
  display: none;
}

#title-fading-in {
  visibility: hidden;
  height: 100px;
}

.image-text {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 230px;
  margin-top: -230px;
  text-align: center;
  vertical-align: middle;
  line-height: 200px;
  font-size: 20px;
  visibility: hidden;
}

.arrow-in-image {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 150px;
  height: 250px;
  margin-top: -230px;
}

.left {
  float: left;
}

.relative {
  position: relative;
}

.image {
  height: 250px;
  width: 300px;
  transition: 1s ease;
  margin-top: -4px;
}

.arrow-right-left {
  height: 500px;
  width: 150px;
  margin-top: -4px;
  visibility: hidden;
  transition: 1s ease;
  opacity: 0.9;
}

.arrow-top-bottom-wrapper {
  width: 1050px;
  height: 150px;
  margin-left: 125px;
}

.arrow-top-bottom {
  visibility: hidden;
  margin-top: -4px;
}

#left-top {
  position: absolute;
  top: -4px;
  left: 125px;
  z-index: 3;
  visibility: hidden;
}

#left-bot {
  position: absolute;
  top: 246px;
  left: 125px;
  z-index: 3;
  visibility: hidden;
}

#right-top {
  position: absolute;
  top: -4px;
  left: 25px;
  z-index: 3;
  visibility: hidden;
}

#right-bot {
  position: absolute;
  top: 246px;
  left: 25px;
  z-index: 3;
  visibility: hidden;
}

<div class="wrapper">
  <div class="arrow-top-bottom-wrapper">
    <img alt="top" class="arrow-top-bottom" id="at" src="images/top.png">
  </div>

  <div class="left relative">
    <img alt="Blue" id="human" class="image" src="images/blue.png">
    <img alt="left-top" id="left-top" src="images/left-top.png">
    <div class="image-text" id="t-human">
      Sit
    </div>

    <img alt="red" id="animal" class="image" src="images/red.png">
    <img alt="left-bot" id="left-bot" src="images/left-bot.png">
    <div class="image-text" id="t-animal">
      Dolor
    </div>
  </div>

  <div class="left">

    <div id="text-div">
      <div class="about-text" id="about-text">
        <center>
          Some Text
        </center>
      </div>

      <img alt="logo mid" class="logo-mid" id="logo-mid" src="images/purple.jpg">
    </div>

  </div>

  <div class="left relative">
    <img alt="green" id="ground" class="image" src="images/green.jpg">
    <img alt="right-top" id="right-top" src="images/right-top.png">
    <div class="image-text" id="t-ground">
      Lorem
    </div>

    <img alt="yellow" id="hand" class="image" src="images/yellow.jpg">
    <img alt="right-bot" id="right-bot" src="images/right-bot.png">
    <div class="image-text" id="t-plant">
      Ipsum
    </div>
  </div>


  <div class="arrow-top-bottom-wrapper">
    <img alt="bot" class="arrow-top-bottom" id="ab" src="images/bot.png">
  </div>

</div>

由于某种原因，加载站点后，隐藏和可见属性一直在变化。为什么会这样？

Answer 1

setInterval 将每隔 x 毫秒重复执行该函数。所以你的函数一直在可见和隐藏之间重复触发。

因为你想做一次你需要使用 setTimeout 它只会在 x 毫秒后触发一次。