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

Question

Я установил CSS для дивов

height:130px;
overflow:hidden;

Я хочу анимацию от текущей высоты до высоты источника, например this , но я не могу получить высоту origin.one возможный способ - после загрузки dom, сохраните высоту в js, например

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

но после этого div сначала покажет все, затем установит высоту 130px.

есть предложения?

Answer 1

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

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

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

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

Answer 2

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

document.getElementById('element').scrollHeight;

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

Answer 3

Разве вы не можете расширить div, удалив вместо этого атрибуты css?

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

Answer 4

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

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