jquery - JQuery 动画 DIV 并保持居中

Question

我有以下代码来演示我想制作动画的表单框：

http://jsfiddle.net/sv33r/1/

JS代码是：

$(".login-form").click(function() {
    $(".login-form").animate({width:500, height: 300});
    $(".footer").animate({width:430, height: 95});
});
​

HTML是：

<div id="wrapper">    
    <form name="login-form" class="login-form" action="" method="post">
    <div class="gradient"></div>
      <div class="header">
        <h1>Logo here</h1>
        <span>test</span></div>

        <div class="content">
            blah    
        </div>

      <div class="footer">
        <input type="button" name="submit" value="Click to test grow" class="register" />
        </div>    
    </form>
</div>​

目前它只是重新调整大小而不在屏幕上重新居中。

为了做到这一点，我需要添加什么？

Answer 1

如果您使用的是#wrapper div，最好将动画应用于该元素。像这样：

$("#wrapper").click(function() {
    $("#wrapper").animate({width:500, height: 300});
    $(".footer").animate({width:430, height: 95});
});

​然后，在你的css中从“.login-container”中删除以下规则：300px（你不需要这个，因为你在“#wrapper”元素中定义了相同的宽度）

这是小提琴中的示例

Answer 2

将 css #wrapper width: 300px 更改为 min-width: 300px 从

#wrapper {
    height: 400px;
    margin: 70px auto;
    width: 300px;
}

至

#wrapper {
    height: 400px;
    margin: 70px auto;
    min-width: 300px;
}