On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with all the code included.
Here is what I have accomplished so far:
HTML:
<div id="ImageMain">
<ul id="nav">
<li id="navm"><a href="#">Men</a></li>
<li id="navm"><a href="#">Women</a></li>
<li id="navm"><a href="#">Contact</a></li>
</ul>
<a href="#" id="homeb">Shop Now</a>
</div>
<script>
$(document).ready(function() {
$("#navm").fadeIn(500);
});
$(document).ready(function() {
$("#homeb").fadeIn(500);
});
</script>
CSS:
#ImageMain {
background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 1400px;
text-align: center;
color: black;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
position: relative;
}
#ImageMain h1 {
padding-bottom: 10px;
padding-top: 450px;
}
#homeinfo {
padding-bottom: 15px;
}
#brand {
float: left;
padding: 100px;
}
#Pronto {
width: 150px;
}
#ImageMain #brand a {
font-size: 20px;
transition-duration: 1s;
}
#nav #navm a {
transition-duration: 1s;
}
#brand a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm a:hover {
opacity: .3;
transition-duration: 1s;
}
#navm {
margin-right: auto;
margin-left: auto;
display: none;
}
#homeb {
text-decoration: none;
color: black;
border-radius: 5px;
border: solid 1px black;
padding: 12px;
transition-duration: 1s;
}
#wrapper a {
text-decoration: none;
border: solid 1px #141414;
border-radius: 5px;
padding: 10px;
color: #141414;
}
#homeb:hover {
opacity: .3;
transition-duration: 1s;
}
#wrapper a:hover {
opacity: 0.7;
transition-duration: 0.8s;
}
h3 {
color: white;
}
#nav {
list-style: none;
padding: 0;
padding-top: 5px;
text-align: center;
}
#nav li {
display: inline-block;
padding: 7px;
}
#nav a {
text-decoration: none;
color: black;
font-size: 15px;
}