получаем исходную высоту элемента div
Вопрос
Я установил 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, как долго она будет расширяться.