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

  1. 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 🙂
  2. 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 🙂
  3. 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.

Dejar respuesta

Please enter your comment!
Please enter your name here