jquery - 获取一个div的原始高度

Question

我设置了div的css

height:130px;
overflow:hidden;

我想要一个从当前高度到原始高度的动画，如 this , 但我无法获取原始高度。一种可能的方法是在加载 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'})
;

或者，如果这对您不起作用，请不要与它作对，而是与它一起工作。考虑将其适应您的设计的方法可能是值得的，例如，从其全尺寸开始，然后动画回到 130 像素。这将让您优雅地检查它的正常大小，并让用户知道那里有更多信息可以看到。