0

我设置了div的css

height:130px;
overflow:hidden;

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

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

但这样做，div 将首先显示所有，然后将高度设置为 130 像素。

有什么建议么？

4

4 回答 4

3

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

尝试将 div 移出屏幕，检查高度，然后将其移回。此外，当我们在这里时，尽可能避免使用多个 jQuery 查找$('.detail')因为这可能是一项非常昂贵的操作。

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

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

于 2009-05-06T05:32:48.320 回答
1

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

$('.detail').css({height:'', overflow:''})
于 2009-05-06T04:28:35.290 回答
1

我以前通过使用元素的scrollHeight属性来完成此操作。

document.getElementById('element').scrollHeight;

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

于 2009-05-06T15:16:26.123 回答
0

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

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

于 2009-05-06T05:23:42.570 回答