получаем исходную высоту элемента div

StackOverflow https://stackoverflow.com/questions/827996

  •  06-07-2019
  •  | 
  •  

Вопрос

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

height:130px;
overflow:hidden;

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

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

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

есть какие-нибудь предложения?

Это было полезно?

Решение

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

document.getElementById('element').scrollHeight;

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

Другие советы

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top