jQuery: Как я могу анимировать на более высокую высоту с высотой, добавляемой к вершине элемента? - PullRequest
Новая
       26

jQuery: Как я могу анимировать на более высокую высоту с высотой, добавляемой к вершине элемента?

0 голосов
/ 17 марта 2010

У меня есть простая проблема, но я не уверен, как ее решить.

По сути, у меня есть скрытый контент, который после раскрытия требует высоты 99 пикселей. Когда свернутый элемент удерживает его, section#newsletter имеет высоту 65 пикселей.

ЖИВОЙ ПРИМЕР: http://dev.supply.net.nz/asap-finance-static/

При нажатии a#signup_form section#newsletter расширяется до 99px с использованием следующего 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);
    })
});

Все это прекрасно работает, за исключением того факта, что этот элемент находится в липком нижнем колонтитуле, поэтому его начальная высота используется для его размещения.

Анимация высоты этого элемента вызывает полосы прокрутки в браузере, потому что добавленные 34px добавляются в конец элемента, поэтому мой вопрос:

Как я могу добавить эти 34 пикселя к вершине элемента, чтобы высота расширялась вверх в тело, а не вниз?

Спасибо за чтение, Я с нетерпением жду вашей помощи и предложений.

Jannis

Ответы [ 2 ]

1 голос
/ 17 марта 2010

просто, чтобы опубликовать полное решение моей конкретной проблемы, если это может помочь другим, вот код:

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, как обычно с полной высотой ИТОГО (после высоты анимации), а затем я нажимаю внизначальное содержимое через margin-top, чтобы компенсировать меньшее значение по высоте при свертывании your_container.

Затем при анимации высота your_container регулируется, а на полях your_container иfooter & .push удалены.

Надеюсь, это поможет кому-то другому, когда они наткнутся на это.

J.

0 голосов
/ 11 ноября 2010

Вы можете сделать что-то вроде этого: 

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