jQuery slideDown con la altura set y desbordamiento

Question

tengo el siguiente código HTML

<div class="text">bla bla bla bla</div> 
<div class="button">Show</div> 

Y el CSS

.text{ 
    height:100px; 
    overflow:hidden; 
} 

Asumir .textdiv tiene forma más texto y lo que hago es ocultar la cantidad de texto debajo de 100px.

¿Cómo puedo slideDown() el div para que pueda ver el texto cuando hago clic en el botón?

El uso de $(".button").slideDown(); no funciona porque necesito eliminar la altura y luego slideDown(), pero esto tampoco funcionará.

Answer 1

Prueba esto es muy simple y fácil sin crear ningún clon.

$(function(){ 
    $(".button").click(function(){ 
     var $text = $(".text"); 
     var contentHeight = $text 
          .addClass('heightAuto').height(); 
     $text.removeClass('heightAuto').animate({ 
      height: (contentHeight == $text.height() ? 100 : contentHeight) 
     }, 500); 

    }); 
}); 

Se ha añadido una nueva clase

.heightAuto{ 
    height:auto; 
} 

Demo

Answer 2

Acabo de leer mal tu pregunta.

Desafortunadamente, realmente no se puede establecer en altura automática. Pero puedes animar a una altura establecida, usando .animate();

.animate({height:'200px'};

slideUp()' y .slideDown(); establezca los divs a display: none y display: block por lo que está bien, que no iba a funcionar para lo que estamos tratando de hacer.

EDITAR

Acabo de ver el post de Kato. Esa es probablemente la mejor opción para ti.

Answer 3

Opción limpia pero costosa: use animar directamente en lugar de slideDown(). Determine la altura a la que desea animar creando un clon y estableciendo la altura en automático.

$('.button').click(function() { 
    var $div = $('div.text'); 
    $div.animate({height: determineActualHeight($div)}); 
}); 

// if you can determine the div's height without this, it would be faster 
// what makes this expensive is inserting and removing an element from the dom 
// of course, you aren't doing this a thousand times a second, so it's probably no biggie 
function determineActualHeight($div) { 
    var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()), 
     height = $clone.height(); 
    $clone.remove(); 
    return height; 
} 

Una opción poco más feo, pero menos costoso: acaba de establecer la altura de automóviles, ocultar el elemento, a continuación, utilizar slideDown() para hacerlo:

$('.button').click(function() { 
    $('div.text').hide().css('height', 'auto').slideDown(); 
} 

Answer 4

me gusta la solución de Shankar pero la funcionalidad se rompe después de los primeros dos clics .. Esto es porque la clase de automóviles se sobreescribe por el estilo de altura en línea. Así que, en cambio, modifiqué solo el atributo de altura.

Aquí es mi ir en él:

$(".button").click(function(){ 
    $box = $(".text"); 
    minimumHeight = 100; 

    // get current height 
    currentHeight = $box.height(); 

    // get height with auto applied 
    autoHeight = $box.css('height', 'auto').height(); 

    // reset height and revert to original if current and auto are equal 
    $box.css('height', currentHeight).animate({ 
     height: (currentHeight == autoHeight ? minimumHeight : autoHeight) 
    }) 
}); 

Un defecto es que si se agrega el relleno de la caja se obtiene alguna fea saltar. Abierto a las conversaciones sobre eso.

Here's a demo

Mejoras y sugerencias serán bienvenidas

Answer 5

bienes de uso scrollHeight, esto puede hacer que el script dinámico.

$('.button').click(function() { 
    $('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000); 
});