所以，我一直在尝试创建一个需要用户登录的 webapp。我采用了我发现的这个外观精美的登录表单中的想法，它使用动画表单切换尝试使用相同的方法，但是我的框与左侧对齐（定义为活动的除外）。页面加载时定义为活动的表单居中，但是当我通过单击链接切换表单时，对齐丢失。我正在使用 jQuery UI 1.9.2。
这是我到目前为止的代码。这是下面相同代码的 jsFiddle。我希望表格始终居中，并且无法弄清楚为什么没有发生这种情况。我对网络开发有点陌生。任何帮助，将不胜感激！
HTML：
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form class="register">
<div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 350px">
<input type="text" placeholder="First Name" id="fname">
<input type="text" placeholder="Last Name" id="lname">
<input type="text" placeholder="Username" id="uname">
<input type="password" placeholder="Password" id="pwdReg">
<input type="password" placeholder="Confirm Password" id="pwdRegConfirm">
<input type="text" placeholder="Email address">
<button id="Register" class="submitButton">Register</button>
<label class="textInBox" style="top:20px"><a href="index.html" rel="login" class="linkform">Have an account already? Log in here</a>
</label>
</div>
</form>
<form class="login active">
<div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 260px">
<input type="text" placeholder="Username" id="username">
<input type="password" placeholder="Password" id="password">
<label class="textInBox" style="top:7px"><a href="#" rel="forgot_password" class="forgot linkform">Forgot your password?</a>
</label>
<button id="submitLogin" class="submitButton">Login</button>
<label class="textInBox" style="top:20px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>
</label>
</div>
</form>
<form class="forgot_password">
<div class="loginBox" style="margin: 30px auto 0; width: 300px; height: 220px">
<input type="text" placeholder="Enter your email address here" id="emailAddrResetPass">
<button id="SendNewPassword" class="submitButton">Reset Password</button>
<label class="textInBox" style="top:15px"><a href="index.html" rel="login" class="linkform">Remebered password? Log in here</a>
</label>
<label class="textInBox" style="top:25px"><a href="#" rel="register" class="linkform">Don't have an account? Register here</a>
</label>
</div>
</form>
</div>
<div class="clear"></div>
</div>
JS：
$(function () {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function (i) {
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if (!$theForm.hasClass('active')) $theForm.hide();
$theForm.data({
width: $theForm.width(),
height: $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click', function (e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function () {
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm = $form_wrapper.children('form.' + target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
}, 500, function () {
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth() {
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
});
CSS：
.loginBox {
border: 1px solid #a1a3a3;
border-radius: 2px;
}
.textInBox {
color: #7f7f7f;
display: inline-block;
float: right;
font: 10px/1 sans-serif;
left: -29px;
position: relative;
text-decoration: none;
top: 10px;
transition: color .8s;
}