remove - jQuery animate height

remove animation jquery

Question

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

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

Quiero mostrar solo 2 filas del texto por defecto, así que coloco la altura a 30px y desbordé Oculto.

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

Estoy probando muchas cosas con jQuery, pero no funciona.

EDITAR:

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

¿Alguien me puede ayudar? ¡Gracias!

Answer 1

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

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

En lugar de animar la altura, pude resolver el problema agregando y eliminando dinámicamente una clase oculta en mi división. Si utiliza jQuery-UI , puede aplicar una duración a estos efectos. Esto parece funcionar en todos los navegadores, también.

Aquí hay un ejemplo de trabajo.

Answer 2

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

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

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

Answer 3

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

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

Luego en su controlador de click :

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

Entonces, lo que esto hace es obtener el .height() (ejecutarlo en document.ready ) antes del overflow: hidden su conjunto, y almacenarlo a través de $.data() , luego en los controladores de click (mediante .toggle() para alternar ), usamos ese valor (o 30) cada otro clic para .animate() para.