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;
}