我设置了div的css
height:130px;
overflow:hidden;
我想要一个从当前高度到原点高度的动画,如this,但是我无法获得原点高度。一个有效的方法是在dom加载后,将高度存储在js中,就像这样
$(function(){
$('.detail').data('originHeight',$('.detail').height());
$('.detail').css({height:'130px',overflow:'hidden'})
})
但是这样做,div将首先显示all,然后将height设置为130px。
有什么建议吗?
答案 0 :(得分:3)
你拥有的方法是正确的方法,但你可能需要一些黑客来避免这会给你带来视觉上的闪烁。
尝试将div移出屏幕,检查高度,然后将其移回。另外,当我们在这里时,尽可能避免使用多个jQuery查找$('.detail')
,因为这可能是一项非常昂贵的操作。
var $detail = $('.detail');
$detail
.css({position : 'absolute', left: '-10000px'})
.data('origHeight', $detail.height())
.css({position : '', left : '', height : '130px', overflow : 'hidden'})
;
或者,如果这对您不起作用,请不要使用它,使用它。可能需要考虑如何使其适应您的设计,例如,从其完整尺寸开始,然后动画回到130px。这将让您优雅地检查其正常大小,并让用户知道有更多信息可以在那里看到。
答案 1 :(得分:1)
你不能通过删除css属性来扩展div吗?
$('.detail').css({height:'', overflow:''})
答案 2 :(得分:1)
我之前使用元素的scrollHeight
属性完成了这个。
document.getElementById('element').scrollHeight;
这可以告诉您如果将高度设置为auto
并启用了overflow
,该元素的高度。
答案 3 :(得分:0)
我认为这是唯一的方法。因为如果你在jQuery中使用CSS修改了高度,则高度变为修改后的高度。修改后的高度是您要访问的高度。
我能想到的唯一可能的情况是使用jquery存储原始高度,或者可能提供固定高度并告诉jQuery它会扩展多长时间。