我想创建一个网站并在登录页面上堆叠。你有一个按钮，如果你点击它会弹出一个更大的窗口。输入用户名和密码后，将显示欢迎信息。
现在我希望在消息的几秒钟之后我的新html页面应该出现，但我真的不知道它是如何工作的，尝试了很多东西。
而且我也想知道，如果我在用户名和密码的条件下写错了，因为每次我想添加一个条件，如：if username =“Schmid”，那么就会弹出一个警告。
非常感谢你的帮助。
$(document).ready(function(){
$("#form_before_lounch").click(function() {
$(this).animate({height:"250px",width:"400px"});
$(this).children("p").animate({fontSize:"25px"});
$("#form").delay(500).fadeIn();
})
$("#submit").click(function(){
var u_name = $("#username").val();
var pass = $("#password").val();
if (u_name != "" && pass != "") {
$("#form_before_lounch").fadeOut();
$("h1").fadeIn();
$("h1").html("Welcome " +u_name);
$("h1").animate({marginTop:"200px"});
};
})
});
</script>* {
margin:0px;
padding:0px;
}
body {
background:url("LogInBackground.jpg") no-repeat center center fixed;
background-size: 100% 100%;
}
#form_before_lounch {
width:100px;
height:35px;
background:#333;
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
cursor:pointer;
}
#form_before_lounch > p {
color:white;
font-family:sans-serif;
text-align:center;
line-height:35px;
}
#form {
display:none;
width: 350px;
height:200px;
margin: 0px auto;
margin-top:5px;
}
#form > div > div{
width:250px;
height:40px;
margin:0px auto;
margin-bottom:10px;
}
#form > div > div > input {
width: 250px;
height: 35px;
background:transparent;
color:white;
border-radius: 5px;
font-size:20px;
font-family:sans-serif;
}
#form > div > #btn {
width:100px;
height:35px;
margin:0px auto;
}
#form > div > #btn > #submit {
width:100px;
height:35px;
}
h1 {
color:white;
text-align:center;
font-family:sans-serif;
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Animated Log In Form</title>
<link rel="stylesheet" type="text/css" href="LogInStylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"type="text/javascript" ></script>
</head>
<body>
<h1></h1>
<section id="form_before_lounch">
<p>Log In</p>
<form id="form" method="post" onsubmit="return false">
<div>
<div>
<input type="text" id="username" placeholder="Username"/>
</div>
<div>
<input type="password" id="password" placeholder="Password"/>
</div>
<div id="btn">
<input type="button" id="submit" value="Log In"/>
</div>
</div>
</form>
</section>
</body>
</html>
<script>