获得div的原点高度

Question

我设置了div的css

height:130px;
overflow:hidden;

我想要一个从当前高度到原点高度的动画，如这个，但我无法得到原点高度。一个有效的方法是在dom加载后，将高度存储在js中，就像这样

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

但是这样做，div将首先显示all，然后将height设置为130px。

有什么建议吗？

Answer 1

我之前使用元素的 scrollHeight 属性完成了这个。

document.getElementById('element').scrollHeight;

这告诉你如果高度设置为 auto 并且 overflow 已启用，元素的高度。

Answer 2

你拥有的方法是正确的方法，但你可能需要一些黑客来避免这会给你带来视觉上的闪烁。

尝试将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 3

你不能通过删除css属性来扩展div吗？

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

Answer 4

我认为这是唯一的方法。因为如果你在jQuery中使用CSS修改了高度，则高度变为修改后的高度。修改后的高度是您要访问的高度。

我能想到的唯一可能的情况是使用jquery存储原始高度，或者可能提供固定高度并告诉jQuery它会扩展多长时间。