jQuery animate altura

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!

InformationsquelleAutor Andrea Turri | 2011-01-05

3 Comentarios

27

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.
- y si tengo más de un expanda y el texto es diferente para cada uno, ¿cómo puedo obtener el RealHeight?
- se almacena por el elemento, de manera que esto funciona para cualquier número de <h2> y <div> pares 🙂
InformationsquelleAutor Nick Craver
5

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/
- se puede animar con el aumento de la velocidad? como dejar que la caída de coger velocidad?
- Sí, que se define por la «flexibilización» (tercer parámetro de la función animate. jQuery tiene algunas easings construir, más como parte de la interfaz de usuario de la biblioteca, o usted puede escribir su propio. Ver más en: api.jquery.com/animate/#easing
- gracias, esto hace que la vida sea realmente fácil 🙂
InformationsquelleAutor Torin Finnemann
2

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.

InformationsquelleAutor Jules

3 Comentarios

Dejar respuesta Cancelar respuesta