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