jQuery:如何将高度添加到元素顶部以设置为更高的高度? [英] jQuery: How can I animate to a taller height with the height being added to the top of the element?

问题描述

我有一个简单的问题，但不确定如何解决.

I have a simple problem but I am not sure how to solve it.

基本上，我有一些隐藏的内容，这些内容一旦展开，就需要99px的高度.收起该元素的元素section#newsletter收合时，其高度设置为65px.

Basically I have some hidden content that, once expanded, requires a height of 99px. While collapsed the element holding it section#newsletter is set to be 65px in height.

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

点击a#signup_form，使用以下jQuery将section#newsletter扩展为99px:

On the click of a#signup_form the section#newsletter is expanded to 99px using the following jQuery:

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

所有这些都很好用，除了该元素位于粘性页脚中，因此可以使用其初始高度来定位它.

All this works great except for the fact that this element sits in a sticky footer so its initial height is used to position it.

动画化此元素的高度会导致浏览器上的滚动条，因为添加的34px添​​加到了元素的底部，所以我的问题是

Animating the height of this element causes scrollbars on the browser, because the 34px added are added to the bottom of the element, so my question:

如何将这34px添​​加到元素顶部，以使高度向上扩展到主体而不是向下?

How can I add these 34px to the top of the element so the height expands upwards into the body not downwards?

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

Thanks for reading, I look forward to your help and suggestions.

Jannis

推荐答案

只是为了针对我的特定问题发布完整的解决方案，以防可能对其他人有所帮助，因此代码如下:

just to post the complete solution to my specific problem in case this may help others, here is the code:

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

因此，基本上，我按通常的方式将footer放置在TOTAL的整个高度(动画高度之后)，然后通过margin-top向下推初始内容，以补偿当your_container已折叠.

So basically I am positioning my footer as I would normally with the full height of the TOTAL (after animation height) and then I push down the initial content via margin-top to compensate for the lesser value in height when the your_container is collapsed.

然后对动画your_container的高度进行调整，并调整your_container和footer上的边距顶部. .push已删除.

Then on animate both the height of your_container is adjusted and the margin-top on your_container and footer & .push are removed.

希望这对其他人偶然发现的情况有所帮助.

Hope this helps someone else when they stumble upon this.

J.

这篇关于jQuery:如何将高度添加到元素顶部以设置为更高的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！