JQuery: Como posso animar uma altura mais alta, com a altura sendo adicionada ao topo do elemento?
-
20-09-2019 - |
Pergunta
Tenho um problema simples, mas não tenho certeza de como resolvê -lo.
Basicamente, tenho algum conteúdo oculto que, uma vez expandido, requer uma altura de 99px. Enquanto desabou o elemento segurando -o section#newsletter
está definido para ter 65px de altura.
Exemplo ao vivo: http://dev.supply.net.nz/asap-finance-tatic/
Com o clique de a#signup_form
a section#newsletter
é expandido para 99px usando o seguinte 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);
})
});
Tudo isso funciona muito bem, exceto pelo fato de esse elemento estar em um rodapé pegajoso, para que sua altura inicial seja usada para posicioná -lo.
Animando a altura desse elemento faz com que as barras de rolagem no navegador, porque os 34px adicionados são adicionados à parte inferior do elemento, então minha pergunta:
Como posso adicionar esses 34px ao topo do elemento para que a altura se expanda para cima no corpo, não para baixo?
Obrigado pela leitura, estou ansioso por sua ajuda e sugestões.
Jannis
Solução
Apenas para postar a solução completa para o meu problema específico, caso isso possa ajudar os outros, aqui está o código:
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: (este é o rodapé pegajoso que estou 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 */
}
Então, basicamente, estou posicionando meu footer
Como normalmente eu faria com a altura total do total (após a altura da animação) e depois empurro o conteúdo inicial por meio da margem para compensar o menor valor em altura quando o your_container
é desmoronado.
Então, em animar a altura de your_container
é ajustado e a margem em your_container
e footer
& .push
estão removidos.
Espero que isso ajude outra pessoa quando eles tropeçam sobre isso.
J.
Outras dicas
Você pode fazer algo assim:
$('.box').animate({
height: '+=10px'
});