получить высоту проихождения DIV в

Question

Я поставил КАС, Div в

height:130px; 
overflow:hidden; 

Я хочу анимацию из текущей высоты к высоте происхождения, как this, но я не могу получить происхождения height.one пути Возможного после дом загружается , сохранить высоту в JS, как этот

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

, но делает это, DIV будет первым показать все, а затем установить высоту 130 пикс.

любые предложения?

Answer 1

Я сделал это раньше, используя свойство элемента scrollHeight.

document.getElementById('element').scrollHeight; 

это говорит о том, как высокий элемент будет, если высота была установлена ​​auto и overflow был включен.

Answer 2

Не можете ли вы расширить divs, удалив атрибуты css вместо этого?

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

Answer 3

Я думаю это единственный способ. Поскольку, если вы изменили высоту с помощью CSS в jQuery, высота стала измененной высотой. И измененная высота - та, к которой вы будете иметь доступ.

Единственный возможный сценарий, который я могу придумать, это хранить исходную высоту с помощью jquery или, возможно, поставить фиксированную высоту и рассказать jQuery, как долго она будет расширяться.

Answer 4

Метод, который у вас есть, - это правильный путь, но вам могут понадобиться хаки, чтобы избежать визуального мерцания, которое это даст вам.

Попробуйте переместить div за пределы экрана, проверив высоту и вернув ее назад. Кроме того, пока мы здесь, избегайте использования нескольких сценариев jQuery, если возможно, $('.detail'), так как это может быть довольно дорогостоящая операция.

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

В противном случае, если это не работает для вас, не работайте с ним, работайте с ним. Он мог бы заплатить, чтобы рассмотреть способы адаптировать его к вашему дизайну, например, начиная с его полного размера и затем оживлять обратно до 130 пикселей. Это позволит вам изящно проверить его нормальный размер, а также позволить пользователю узнать, что там будет больше информации.