我试图通过淡入我的名字和信息来介绍我的网站，大约 5 秒后，我希望那个 div 消失，顺利过渡到一个完整的网站。目前，当我尝试淡出该介绍时，代码不允许我在该隐藏的 div 之上添加文本。我认为这可能需要使用 Javascript，但我不知道如何。
HTML:
<!DOCTYPE html>
<head>
<title>My Name</title>
<meta charset="utf-8">
<meta name="description" content="My Organization">
<meta name="author" content="My Name">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Youth | Society</title>
<! -- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<! -- Mobile META tags -- >
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<! -- CSS FILE -- >
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="website.css">
</head>
<body>
<intro>
<div class="text_paragraph">
<h1>My Name</h1>
<h3>My School</h3>
<h3>Grade 10</h3>
</div>
</intro>
</body>
</html>
CSS:
body {
background-image:url(footer_lodyas.png);
}
intro {
color: grey;
font-family: sans-serif;;
font-size: 19px;
opacity: 0.5;
text-align: center;
margin-top: 200px;
}
.text_paragraph {
-webkit-animation: fadeInOut 2s;
opacity:0;
}
.bdy {
-webkit-animation:fadeIn 3s;
}
@-webkit-keyframes fadeInOut{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
72% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fadeIn{
0% {
opacity: 0;
}
75% {
opacity:0;
}
100% {
opacity:1;
}
}
最佳答案
应该是:
var $el = $('.text_paragraph');
$el.fadeIn(5000, function(){$el.fadeOut(3000)})
关于javascript - 无法让 div 淡入然后平滑切换到另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28156270/