jQuery: Come posso animare ad un'altezza più alto con l'altezza che viene aggiunto alla parte superiore dell'elemento?

Question

Ho un problema semplice, ma non sono sicuro come risolverlo.

In fondo ho qualche contenuto nascosto che, una volta espanso, richiede un'altezza di 99px. Mentre l'elemento collassato tenendolo section#newsletter è impostato per essere 65px in altezza.

ESEMPIO IN DIRETTA: http://dev.supply.net.nz/asap -Finance-static /

Al click del a#signup_form il section#newsletter viene espansa per 99px utilizzando il seguente 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);
    })
});

Tutto questo funziona ottimo, tranne per il fatto che questo elemento si trova in un piè di pagina appiccicoso quindi la sua altezza iniziale viene utilizzato per posizionarlo.

Animare l'altezza di questo elemento fa sì che le barre di scorrimento sul browser, perché il 34px aggiunto vengono aggiunti alla parte inferiore dell'elemento, quindi la mia domanda:

Come posso aggiungere questi 34px alla parte superiore dell'elemento così l'altezza si espande verso l'alto nel corpo non verso il basso?

Grazie per la lettura, Non vedo l'ora al vostro aiuto e suggerimenti.

Jannis

Answer 1

solo per inviare la soluzione completa per il mio problema specifico nel caso in cui questo può aiutare gli altri, ecco il codice:

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: ( questo è il piè di pagina appiccicoso sto usando )

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

Quindi, fondamentalmente sto posizionando il mio footer come avrei normalmente con l'intera altezza del totale (dopo altezza animazione) e poi spingere verso il basso il contenuto iniziale tramite margin-top per compensare il minor valore in altezza quando il your_container è collassata.

Poi animato sia l'altezza di your_container è regolata e il margine-top su your_container e footer & .push vengono rimossi.

Spero che questo aiuti qualcun altro, quando si imbattono in questo.

J.

Answer 2

Si può fare qualcosa di simile:

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