我有一个固定高度的DIV:
.w {
height: 100px;
overflow: hidden;
}
如果我在其中放置文本,它将隐藏超出100px的所有内容.我有一个显示所有文本的按钮,基本上它是这样的:
$('.w').height('auto');
这将使所有文本可见,但我想动画这个.这不适用于height =’auto’,它必须具有特定的高度.
问题是:如何获得DIV应该能够显示其中所有文本的高度?
解决方法
您可以将高度设置为“自动”,然后测量它,然后将其设置回来并启动效果.
像这样的东西(live example):
jQuery(function($) {
// Div starts with "style='height: 10px; overflow: hidden"
var div = $('#thediv');
// On click,animate it to its full natural height
div.click(function() {
var oldHeight,newHeight;
// Measure before and after
oldHeight = div.height();
newHeight = div.height('auto').height();
// Put back the short height (you Could grab this first
div.height(oldHeight);
div.animate({height: newHeight + "px"},"slow");
});
});