jQuery：如何将高度添加到元素顶部，从而将动画设置为更高的高度？

Question

我有一个简单的问题，但我不知道如何解决它。

基本上我有一些隐藏内容，一旦展开，需要 99px 的高度。折叠时，容纳它的元素 section#newsletter 的高度设置为 65px。

实例：http://dev.supply.net.nz/asap-finance- static/

单击 a#signup_form 时，section#newsletter 使用以下 jQuery 扩展到 99px：

$('#newsletter_form').hide(); // hide the initial form fields
$('#form_signup').click(function(event) {
    event.preventDefault(); // stop click
    // animate
    $('section#newsletter').animate({height: 99}, 400, function() {
        $('#newsletter_form').show(300);
    })
});

所有这些都很好用，除了以下事实：元素位于粘性页脚中，因此它的初始高度用于定位它。

动画这个元素的高度会导致浏览器上出现滚动条，因为添加的 34px 被添加到元素的底部，所以我的问题：

如何将这些 34px 添加到元素的顶部，以便高度向上扩展到主体而不是向下？

感谢您的阅读， 我期待您的帮助和建议。

詹尼斯

Answer 1

只是为了发布我的特定问题的完整解决方案，以防对其他人有所帮助，这里是代码：

JS:

$('your_trigger').click(function(event) { // click on the button to trigger animation
    event.preventDefault(); // stop click
    // animate
    function resizer () { 
        // run inside a function to execute all animations at the same time
        $('your_container').animate({marginTop: 0, height:99}, 400, function() {
            $('#newsletter_form').show(300); // this is just my content fading in
        });
        // this is the footer container (inside is your_container) 
        // & div.push (sticky footer component)
        $('footer,.push').animate({marginTop:0}, 400);
    };
    resizer(); // run
});

CSS: (这是我正在使用的粘性页脚）

/* ================= */
/* = STICKY FOOTER = */
/* ================= */
html, body {
    height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -135px; /* -full expanded height of the footer */
position: relative;
}
footer, .push {
height: 101px; /* height of this is equal to the collapsed elements height */
clear: both;
}
section#newsletter,footer {
    margin-top: 34px; 
    /* this is the difference between the expanded and the collapsed height */
}

所以基本上我正在定位我的页脚，就像我通常使用 TOTAL 的完整高度一样（在动画高度之后），然后我通过 margin-top 下推初始内容，以补偿 your_container 折叠时高度的较小值。

然后在动画上调整 your_container 的高度以及 your_container 和 footer 上的边距顶部。 .push 被删除。

希望这对其他人偶然发现这一点时有所帮助。

J。

Answer 2

你可以这样做：

$('.box').animate({
    height: '+=10px'
});