obtener la altura de origen de un div

Question

Configuré el css del div

height:130px;
overflow:hidden;

Quiero una animación desde la altura actual hasta la altura de origen, como this , pero no puedo obtener la altura de origen. Una forma posible es después de cargar dom, almacenar la altura en js, así

$(function(){
    $('.detail').data('originHeight',$('.detail').height());
    $('.detail').css({height:'130px',overflow:'hidden'})
})

pero al hacer esto, el div mostrará primero todo, luego establecerá la altura en 130 px.

alguna sugerencia?

Answer 1

He hecho esto antes usando la propiedad scrollHeight del elemento.

document.getElementById('element').scrollHeight;

esto le indica qué tan alto sería el elemento si la altura se configurara en auto y se habilitara overflow .

Answer 2

El método que tiene es el correcto, pero es posible que necesite algunos trucos para evitar el parpadeo visual que esto le dará.

Intente mover el div fuera de la pantalla, verifique la altura y luego muévalo hacia atrás. Además, mientras estamos aquí, evite usar múltiples búsquedas de jQuery si es posible $ ('. Detail') ya que esta puede ser una operación bastante costosa.

var $detail = $('.detail');
$detail
    .css({position : 'absolute', left: '-10000px'})
    .data('origHeight', $detail.height())
    .css({position : '', left : '', height : '130px', overflow : 'hidden'})
;

Alternativamente, si esto no funciona para usted, no trabaje en contra, trabaje con él. Podría ser útil considerar formas de adaptarlo a su diseño, por ejemplo, comenzando en su tamaño completo y luego animando nuevamente a 130px. Esto le permitirá verificar con gracia su tamaño normal, así como también al usuario saber que hay más información para ver allí.

Answer 3

¿No puedes expandir los divs eliminando los atributos css en su lugar?

$('.detail').css({height:'', overflow:''})

Answer 4

Creo que esa es la única manera. Porque si modificó la altura usando CSS en jQuery, la altura se convirtió en la altura modificada. Y la altura modificada es la que tendrá acceso.

El único escenario posible que se me ocurre es almacenar la altura original usando jquery o tal vez suministrar su altura fija y decirle a jQuery cuánto tiempo se expandiría.