我试图让两个文本框以及三个图像在页面加载后立即淡入。我试过在 .onload 中使用一些 jQuery，但我似乎无法弄明白。
这是 JSFiddle
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Me</title>
<script src="../js/modernizr.custom.85628.js"></script>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
<link href="../css/normalize.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="text/css" href="../images/favicon.png" />
<script type="text/javascript">
$(document).ready(function(e) {
});
</script>
</head>
<body>
<section class="main_front">
<nav id="nav_container">
<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li"><a href="#">Goals</a></li>
<li class="nav_li"><a href="#">School Site</li></a>
<li class="nav_li"><a href="#">Web Design</li></a>
<li class="nav_li"><a href="#">Summer</li></a>
<li class="nav_li"><a href="#">Schedule</li></a>
</ul><!--end of right_links-->
</nav><!--end of nav_container-->
<div class="all_home">
<div class="home">
<div class="home_content">
Total Recall
</div><!--end of home_content-->
<div class="home_content2">
<p>A webpage about me.</p>
</div><!--end of home_content2-->
</div><!--end of home-->
<div class="home_imgs">
<div class="iphone">
<img src="../images/iphone.png" width="75" height="130" />
</div><!--end of iphone-->
<div class="computer">
<img src="../images/computer.png" width="135" height="130" />
</div><!--end of computer-->
<div class="ipad">
<img src="../images/ipad-outline.png" width="95" height="130" />
</div><!--end of ipad-->
</div><!--end of home_imgs-->
</div><!--end of all_home-->
</section><!--end of main_front-->
<section class="footer">
<div class="contact">
<div class="phonenumber">
<img src="../images/23194.png" width="20" height="20" /> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div class="email">
<img src="../images/icon-ios7-email-outline-128.png" width="23" height="23" class="mail_icon"/>
<a href="mailto:adesign@email.com">adesign@email.com</a>
</div><!--end of email-->
</div><!--end of contact-->
</section><!--end of footer-->
</body>
</html>
CSS 代码
@charset "utf-8";
/* CSS Document */
body {
margin:0;
margin:none;
}
.logo {
float:left;
margin-top:5px;
}
.main_front {
width:100%;
height:90vh;
background-color:#A9D2F1;
}
/* .nav_links {
width:1600px;
height:100px;
margin:auto;
color:white;
} */
.nav_li {
float:right;
margin-right:20px;
}
#nav_container {
width:100%;
height:79px;
/*background-color:#82B5E8;*/
background-image:url(../images/nav_container_bg.png);
}
.right_links {
width:70%;
float:right;
list-style-type:none;
text-align:center;
}
.right_links a {
display:inline-block;
list-style-type:none;
text-decoration:none;
color:white;
font-size:17px;
margin-top:0px;
height:30px;
padding-top:15px;
font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
width:130px;
height:40px;
line-height:10px;
text-align:center;
border-radius:15px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-ms-transition:all 0.5s;
}
.right_links li a {
display:block;
width:130px;
height:40px;
}
.right_links li:hover {
background-color:rgba(22,96,131,0.5);
}
.phonenumber {
font-size:20px;
text-align:center;
margin-right:25px;
}
.phonenumber img {
margin-top:4px;
}
.contact {
width:500px;
height:9vh;
background-color:#80b1e1;
border-radius:5px;
margin:auto;
position:relative;
}
.email {
font-size:20px;
text-align:center;
margin-top:5px;
}
.mail_icon {
position:absolute;
margin-left:-25px;
margin-top:1px;
}
.email a {
color:#000;
text-decoration:none;
transition:0.3s;
}
.email a:hover {
color:#313131;
}
.footer {
width:100%;
height:10vh;
background-color:#8FC6ED;
}
.all_home {
width:100%;
height:700px;
margin:auto;
}
.home_content {
width:175px;
height:30px;
background-color:#6886CC;
border-radius:15px;
margin:auto;
position:relative;
margin-top:30px;
padding:15px;
padding-bottom:20px;
padding-left:25px;
padding-right:25px;
color:#ffffff;
font-size:32px;
text-align:center;
}
.home_content2 {
width:275px;
height:40px;
background-color:#6886CC;
border-radius:10px;
margin:auto;
position:relative;
color:#ffffff;
font-size:22px;
text-align:center;
margin-top:25px;
line-height:40px;
padding-left:10px;
padding-right:10px;
}
.home_imgs {
display:inline;
width:600px;
height:300px;
margin:auto;
position:relative;
}
.iphone {
margin-top:20px;
float:left;
margin-left:511px;
}
.computer {
margin-top:21px;
margin-left:61px;
float:left;
}
.ipad {
margin-top:20px;
margin-left:56px;
float:left;
}
最佳答案
您没有在您的页面源代码中包含 jQuery，因此您不能使用它。
同样要淡入需要先通过 css 隐藏它们的元素
.all_home {
display:none;
}
或javascript
jQuery('.all_home').hide().fadeIn(200);
另请注意，jQuery 为文档就绪调用提供了方便的快捷方式:
jQuery(function () {
// I'm called when the document loaded
})
关于jquery - 如何在页面加载时让这个 div 淡入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25478472/