0

単純な問題がありますが、解決方法がわかりません。

基本的に、拡張すると 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 を要素の上部に追加して、高さが下向きではなく上向きに拡張されるようにするにはどうすればよいですか?

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

ジャニス

4

2 に答える 2

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れたときの高さの低い値を補正するために、margin-topを介して最初のコンテンツを押し下げます。your_container

次に、アニメーションでの高さをyour_container調整し、マージントップをオンにyour_containerしてfooter＆.pushを削除します。

彼らがこれにつまずいたとき、これが他の誰かを助けることを願っています。

J。

于 2010-03-17T20:06:43.920 に答える
0

次のようなことができます。

$('.box').animate({
    height: '+=10px'
});
于 2010-11-11T18:53:30.233 に答える