Question

我有以下代码来演示我希望动画的表单框：

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”元素定义了相同的宽度）

Here is the example in fiddle

Answer 2

将css #wrapper宽度：300px更改为min-width：300px 从

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

到

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

JQuery动画DIV并保持在中心

2 个答案: