obter altura origem de uma div

Question

Eu defini css da div

height:130px;
overflow:hidden;

Eu quero uma animação de altura atual à altura origem como este , mas eu não posso obter o caminho posible origem height.one é depois de dom carregado, armazenar a altura em js, como este

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

mas fazendo isso, o div mostrará primeiro de tudo, em seguida, definir a altura para 130px.

alguma sugestão?

Answer 1

Eu fiz isso antes usando a propriedade scrollHeight do elemento.

document.getElementById('element').scrollHeight;

este lhe diz o quão alto o elemento seria se a altura foi definido para auto e overflow foi habilitado.

Answer 2

O método que você tem é o caminho certo, mas você pode precisar de alguns hacks para evitar a cintilação visual que isso vai lhe dar.

Tente mover a div fora da tela, verificando a altura e, em seguida, movê-lo de volta. Além disso, enquanto nós estamos aqui, evite usar vários jQuery look-ups, se possível $('.detail') pois isso pode ser uma operação muito caro.

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

Como alternativa, se isso não está funcionando para você, não funcionam contra ele, trabalhar com ele. Pode pagar para estudar formas de adaptá-lo em seu projeto, por exemplo, a partir de seu tamanho completo e, em seguida, a animação volta para 130px. Isso permitirá que você verifique graciosamente seu tamanho normal, bem como permitir que o conhecimento do usuário que não há mais informações para ser visto lá.

Answer 3

Você não pode expandir as divs removendo o css atributos vez?

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

Answer 4

Eu acho que isso é a única maneira. Porque se você modificou a altura usando CSS no jQuery, a altura tornou-se a altura modificada. E a altura modificado é aquele que você vai acessar.

O cenário só é possível que eu posso pensar é a loja a altura original usando jQuery ou talvez fornecer a sua altura fixa e dizer jQuery quanto tempo iria expandir.