2017-04-16 68 views
0

我正試圖將一個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/

+0

ID必須只能在文檔中使用一次 - 你正在使用'#navm'三次... – Johannes

回答

1

您需要創建一個父DIV的按鈕錨:

<div id="link"> 
    <a href="#" id="homeb">Shop Now</a> 
</div> 

你需要隱藏的目標元素(你必須以父母爲對象):

#nav{ display:none;} 
#link{ display:none;} 

看着工作片段上的js

$(document).ready(function() { 
 
      $("#nav").fadeIn(500); 
 
      $("#link").fadeIn(1000); 
 
     });
#ImageMain { 
 
\t background-image: url(http://juliapavel.de/wp-content/uploads/2016/07/DSC1139-1.jpg); 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t height: 1400px; 
 
\t text-align: center; 
 
\t color: black; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t padding-top: 0px; 
 
\t position: relative; 
 
} 
 

 
#ImageMain h1 { 
 
\t padding-bottom: 10px; 
 
\t padding-top: 450px; 
 
} 
 

 
#homeinfo { 
 
\t padding-bottom: 15px; 
 
} 
 

 
#brand { 
 
\t float: left; 
 
\t padding: 100px; 
 
} 
 

 
#Pronto { 
 
\t width: 150px; 
 
} 
 

 
#ImageMain #brand a { 
 
\t font-size: 20px; 
 
\t transition-duration: 1s; 
 
} 
 

 
#nav #navm a { 
 
\t transition-duration: 1s; 
 
} 
 

 
#brand a:hover { 
 
\t opacity: .3; 
 
\t transition-duration: 1s; 
 
} 
 

 
#navm a:hover { 
 
\t opacity: .3; 
 
\t transition-duration: 1s; 
 
} 
 

 
#navm { 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t display: none; 
 
} 
 

 
#homeb { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t border-radius: 5px; 
 
\t border: solid 1px black; 
 
\t padding: 12px; 
 
\t transition-duration: 1s; 
 
} 
 

 
#wrapper a { 
 
\t text-decoration: none; 
 
\t border: solid 1px #141414; 
 
\t border-radius: 5px; 
 
\t padding: 10px; 
 
\t color: #141414; 
 
} 
 

 
#homeb:hover { 
 
\t opacity: .3; 
 
\t transition-duration: 1s; 
 
} 
 

 
#wrapper a:hover { 
 
\t opacity: 0.7; 
 
\t transition-duration: 0.8s; 
 
} 
 

 
h3 { 
 
\t color: white; 
 
} 
 

 
#nav { 
 
    \t list-style: none; 
 
    \t padding: 0; 
 
    \t padding-top: 5px; 
 
    \t text-align: center; 
 
} 
 

 
#nav li { 
 
    \t display: inline-block; 
 
\t padding: 7px; 
 
} 
 

 
#nav a { 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t font-size: 15px; 
 
} 
 

 
#nav{ display:none;} 
 
#link{ display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ImageMain"> 
 
\t 
 
\t <ul id="nav"> 
 
\t \t <li id="navm"><a href="#">Men</a></li> 
 
\t \t <li id="navm"><a href="#">Women</a></li> 
 
\t \t <li id="navm"><a href="#">Contact</a></li> 
 
\t </ul> 
 
\t 
 
    <div id="link"> 
 
    <a href="#" id="homeb">Shop Now</a> 
 
    </div> 
 
\t 
 

 
</div>

1

你忘了他們展示在你面前隱藏物品不能有兩個單獨的項目具有相同的ID,所以我改變了選擇器。

$("#nav a, #homeb").hide(); 
 
$(document).ready(function() { 
 
    $("#nav a").fadeIn(1000); 
 
    $("#homeb").fadeIn(1000); 
 
});
#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; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ImageMain"> 
 

 
<ul id="nav"> 
 
    <li><a href="#">Men</a></li> 
 
    <li><a href="#">Women</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul> 
 

 
<a href="#" id="homeb">Shop Now</a> 
 

 
</div>