jQuery animate altura

Puede almacenar la altura justo antes de adelgazar a 30px en la carga de la página, por ejemplo:

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

A continuación, en su click controlador:

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

Lo que esto hace es obtener la .altura() (ejecutar este en document.ready) antes de la overflow: hidden se establece, y se almacena a través de $.de datos(), a continuación, en la click controladores (a través de .toggle() a los suplentes), utilizamos el valor (o 30) todos los demás haga clic para .animate() a.

La scrollHeight propiedad del elemento DOM también podría darle la altura que usted necesita.

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

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

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

He estado tratando con el mismo problema hoy en día y no podía conseguir que funcione correctamente. Incluso con la altura correcta calculado con height: auto aplicada, la animación no me da los resultados correctos. He intentado poner en $(window).load en lugar de $(document).ready, lo que ayudó un poco, pero todavía se cortó la última línea de texto.

Lugar de animar a la altura de sí mismo, yo era capaz de resolver el problema mediante la adición y eliminación de una oculto clase a mi div de forma dinámica. Si utiliza jQuery-UI, se puede aplicar una duración de estos efectos. Esto parece funcionar en todos los navegadores, también.

He aquí un ejemplo de trabajo.