jQuery animar altura

Question

Tengo un botón y un div con algo de texto dentro:

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

Quiero mostrar solo 2 filas del texto de forma predeterminada, así que puse la altura en 30 px y desbordé Oculto.

Cuando hago clic en el elemento H2, quiero animar el texto para que se deslice hacia abajo y si hago clic otra vez, se deslizará hacia arriba a la altura predeterminada (30 px).

Estoy intentando muchas cosas con jQuery, pero no funciona.

EDITAR:

También tengo más de un "expandir" y más de un "H2" y el texto es diferente en div, por lo que la altura no es fija...Me gustaría deslizarme a la altura "automática" o al 100%.

¿Alguien me puede ayudar?¡Gracias!

Answer 1

Puede almacenar la altura justo antes de adelgazar abajo a 30px al cargar la página, por ejemplo:

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

A continuación, en el controlador click:

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

Así que lo que hace es obtener la .height() (ejecutar esto en document.ready) antes el overflow: hidden se puso, y lo almacena a través de $.data() , a continuación, en los manejadores de click (a través de .toggle() para alternar), usamos ese valor (o 30) cada otro clic a .animate() a.

Answer 2

La propiedad scrollHeight del elemento DOM podría también le dará la altura que necesita.

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

Ejemplo de trabajo se puede encontrar en http://jsfiddle.net/af3xy/4/

Answer 3

Este hilo no es el más nuevo, pero aquí hay otro enfoque.

He estado lidiando con el mismo problema hoy y no pude lograr que funcione correctamente.Incluso con la altura correcta calculada con height: auto aplicada, la animación no me daría los resultados correctos.Intenté ponerlo $(window).load en lugar de $(document).ready, lo que ayudó un poco, pero aun así cortó mi última línea de texto.

En lugar de animar la altura en sí, pude resolver el problema agregando y eliminando un oculto class a mi div dinámicamente.Si utiliza jQuery-UI, puedes aplicar una duración a estos efectos.Esto también parece funcionar en todos los navegadores.

Aquí hay un ejemplo práctico.