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

所有这一切工作，除了该元素坐在一个棘手的事实，伟大所以它的初始高度用于定位它。

动画这个元素的高度，使滚动条上的浏览器，因为添加了34像素被添加到元件的底部，所以我的问题：

我如何能够将这些34像素添加到元素的顶部，这样身高向上扩展到身体不是向下？

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

Jannis

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：（this is the sticky footer i am using）

/* ================= */ 
/* = 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 */ 
} 

所以基本上我正在定位我的footer，正如我通常所用的TOTAL的高度（动画高度之后），然后通过margin-top压低初始内容以补偿your_container折叠时的较小高度值。

然后在动画两者your_container高度被调节和上your_container和footer & .push的边距被除去。

希望这可以帮助别人，当他们偶然发现这一点。

J.

Answer 2

你可以做这样的事情：

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