我是jquery slideUp和slideDown属性。我用两个href链接有两个div。点击登录和注册按钮，相应的div应该向上滑动并向下滑动。但是在点击注册按钮时，它会在登录框滑动之前向上滑过登录框，反之亦然。谁能帮助我如何避免一个div在另一个div上滑动。
以下是代码。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body
{
background-color:#000;
}
#container
{
margin-top:10%;
margin-left: auto;
margin-right:auto;
<!--margin-right: 200px;-->
border-style: none;
width:350px;
}
#tabbox
{
height:40px;
border-style:none;
}
#panel
{
height:300px;
border-style:none;
background-color:#FFF;
border-radius: 10px;
box-shadow:8px 8px 5px #B8B894;
}
.tab
{
background:#dedede;
display:block;
height:40px;
line-height:40px;
text-align:center;
width: 80px;
float: right;
font-weight:bold;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
margin-right:7px;
<!--box-shadow: 4px 4px 3px #888888;-->
}
.select
{
background-color:#EBFFF5;
<!--box-shadow: 4px 4px 3px #888888;#CCE680-->
}
#loginbox
{
min-height:200px;
margin-left:30px;
padding:10px;
padding-top:70px;
}
#signupbox
{
display:none;
min-height:200px;
padding:5px;
margin-left:30px;
padding-top:90px;
}
#loginEmail
{
background-image:url('user.png');
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
#loginPwd
{
background-image:url('key1.png');
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
#submit
{
height:30px;
width:30%;
box-shadow: 8px 8px 5px #888888;
border-radius: 9px;
background-color: #99D6AD;
font-weight: bold;
}
p
{
font-family: "Times New Roman", Times;
font-size:30px;
}
#signupemail
{
background-repeat:no-repeat;
padding-left:30px;
border-radius: 10px;
border-color: #668566;
box-shadow: 8px 8px 5px #888888;
height:25px;
width:70%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='login')
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
else
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#signupbox").slideDown();
$("#loginbox").slideUp();
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="tabbox">
<a href="#" id="signup" class="tab signup">SignUp<a>
<a href="#" id="login" class="tab select">Login<a>
</div>
<div id="panel">
<div id="loginbox">
<br>
<input type="email" name="loginEmail" id="loginEmail" placeholder="Email"/>
<br>
<br>
<input type="password" name="loginPwd" id="loginPwd" placeholder="Password"/>
<br>
<br>
<input type="submit" name="submit" id="submit" value="Login">
</div>
<div id="signupbox">
<input type="email" name="loginEmail" id="signupemail" placeholder="Enter Email"/>
<br>
<br>
<input type="submit" name="submit" id="submit" value="Send Mail">
</div>
</div>
</div>
</body>
</html