jQueryの：どのように私は要素の先頭に追加された高さと背の高い高さにアニメーション化することができますか？

Question

私は、単純な問題を抱えているが、私はそれを解決する方法がわからないです。

基本的に私は、一度拡張し、99pxの高さを必要とするいくつかの隠されたコンテンツを持っています。それにsection#newsletter保持要素を崩壊しつつ高さ65pxするように設定されます。

LIVE例： http://dev.supply.net.nz/asap -finance静的/ の

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を追加することができますか？

読んでくれてありがとう、 私はあなたの助けと提案を楽しみにしてます。

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：（これは私が使用していスティッキーフッターです）

/* ================= */
/* = 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の全高とし、その後、私はfooterがあるときに高さが低い値を補償するためのマージントップを経由して初期コンテンツを押し下げると同じように

は、基本的には、だから、私はyour_containerを配置しています崩壊します。

そしてアニメートにyour_containerの高さの両方が調整され、除去されるyour_containerとfooter＆.pushにマージントップ

は、彼らが、この時につまずくとき、これは他の誰かを助けることを望みます。

Jます。

Answer 2

あなたはこのような何かを行うことができます：

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