Altura animada da jQuery

Question

Eu tenho um botão e uma div com dentro de algum texto:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

Quero mostrar apenas 2 linhas do texto como padrão, então coloco altura a 30px e transbordamento oculto.

Quando clico no elemento H2, quero animar o texto para o arremesso e se eu clicar em outra hora, ele deslizará para a altura padrão (30px).

Estou tentando muitas coisas com o jQuery, mas não funciona.

EDITAR:

Eu também tenho mais de um "expandir" e mais de um "H2" e o texto é diferente na div, para que a altura não seja consertada ... eu gostaria de deslizar para a altura "automática" ou 100%.

Alguém pode me ajudar? Obrigado!

Answer 1

Você pode armazenar a altura pouco antes de diminuir para 30px na carga da página, por exemplo:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Então em seu click manipulador:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

Então, o que isso faz é obter o .height() (execute isso em document.ready) antes da a overflow: hidden ele definiu e armazena -o via $.data(), então no click Manipuladores (via .toggle() para alternar), usamos esse valor (ou 30) todos os outros cliques para .animate() para.

Answer 2

o scrollHeight A propriedade do elemento DOM também pode fornecer a altura necessária.

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

Exemplo de trabalho pode ser encontrado em http://jsfiddle.net/af3xy/4/

Answer 3

Este tópico não é o mais novo, mas aqui está outra abordagem.

Eu tenho lidado com o mesmo problema hoje e não consegui fazer funcionar corretamente. Mesmo com a altura correta calculada com height: auto Aplicado, a animação não me daria os resultados corretos. Eu tentei colocá -lo $(window).load ao invés de $(document).ready, o que ajudou um pouco, mas ainda cortou minha última linha de texto.

Em vez de animar a altura em si, pude resolver o problema adicionando e removendo um escondido classe para minha div dinamicamente. Se você usar jQuery-UI, você pode aplicar uma duração a esses efeitos. Isso parece funcionar em todos os navegadores também.

Aqui está um exampe funcional.