I'm trying to make the background .gif fade out after 8s. 7s later a text and a button should appear. Everything seems to be working so far however, the text and button seems to fade out along with the background. It looks like it may be the way I set up the html but I was wondering if there was a way around this if using just jQuery and maybe barely just touching with the html? Suggestions welcomed thanks in advance!
// Hide DISPIRIT text then fade in
$(".brand-heading").hide().delay(7000).fadeIn("slow");
$(".btn-circle").hide().delay(7000).fadeIn("slow");
// BG delay then fade out
$(".intro-body").delay(8000).fadeOut("slow");.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
background-color: black;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
background: url(../img/static.gif) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.brand-heading {
font-size: 40px;
}
@media (min-width: 768px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 100px;
}
/*.intro .intro-body .intro-text {
font-size: 26px;
}*/
}
.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid white;
border-radius: 100% !important;
font-size: 40px;
color: white;
background: transparent;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading"><i>Dispirit</i></h1>
<p class="intro-text"></p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
