我正試圖將一個href按鈕和一個菜單作爲頁面加載時淡入。我很難找出確切的代碼,因爲它被放置在很多不同的標籤中,我對JS和JQuery相當陌生。我已經包含了所有代碼的小提琴。帶JQuery的目標導航菜單
到目前爲止,我已成功驗證碼:
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;
}
https://jsfiddle.net/tux41Lvp/
ID必須只能在文檔中使用一次 - 你正在使用'#navm'三次... – Johannes