Tengo un botón y una etiqueta div con el interior de algunas de texto:
<h2>Click me</h2>
<div class="expand">Lot of text here....</div>
Quiero mostrar solo 2 filas de texto como predeterminado, así que me puse a la altura de la 30px y rebosadero Oculto.
Cuando hago clic en el elemento H2 quiero animar el texto a slideDown y si hago clic en otro tiempo les slideUp a la altura por defecto (30px).
Estoy tratando de muchas cosas con jQuery, pero no funciona.
EDICIÓN:
También tengo más de uno de «ampliar» y más de uno «H2» y el texto es diferente en div, por lo que la altura no es la solución… me gustaría que se deslice en el «auto» de altura o 100%.
Alguien me puede ayudar?
Gracias!
Puede almacenar la altura justo antes de adelgazar a 30px en la carga de la página, por ejemplo:
A continuación, en su
click
controlador:Lo que esto hace es obtener la
.altura()
(ejecutar este endocument.ready
) antes de laoverflow: hidden
se establece, y se almacena a través de$.de datos()
, a continuación, en laclick
controladores (a través de.toggle()
a los suplentes), utilizamos el valor (o 30) todos los demás haga clic para.animate()
a.<h2>
y<div>
pares 🙂La
scrollHeight
propiedad del elemento DOM también podría darle la altura que usted necesita.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.