0
ich folgende Website haben:CSS versteckt und sichtbaren Eigenschaften ändern sich die ganze Zeit
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>Aus irgendeinem Grund nach die Website laden, die verborgenen und sichtbaren Eigenschaften die ganze Zeit ändern. Warum ist das der Fall?
Weil Sie Intervall einstellen, das wiederholt sichtbar und ausgeblendet auslöst? Und Sie var "ausgeführt" ist nutzlos – user5014677
Da gibt es eine Menge von setInterval geschachtelt, dass diese Eigenschaften ändert – dloeda
Aber ich brauche diese SetInterval-Funktionen wegen der Design-Zwecke. Diese Elemente sollten erst nach diesen Zeiten erscheinen ... :-( –