根据内容大小动态调整div动态高度并调整其大小
有谁知道是否可以对div的大小进行动画处理,以便它的内容大小恰到好处?高度必须是动态的,这意味着如果我调整浏览器窗口的大小,那么div会增加/减少高度。我已经有了视口80%的动态宽度。根据内容大小动态调整div动态高度并调整其大小
这是我用来为当前的容器调整大小的动画,并且调整大小的部分起作用,但动画不能用于调整大小。当我将高度设置为固定高度时,请说:
$(".pagecontainer").animate({
height: '700px'
}, 500);
它动画。但是,如果我有身高:'自动',那么它不会动画,只是简单地捕捉到新的尺寸。
JS:
<script>
function setContainerHeight() {
$(".pagecontainer").animate({
height: 'auto'
}, 500);
}
$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut(0);
setContainerHeight();
$(this.getAttribute("href")).fadeIn();
});
</script>
CSS:
.pagecontainer {
min-height:450px;
width:80%;
min-width:800px;
padding:50px 0;
margin: 0 auto;
}
.pagecontainer>div{
display: none; /*wait until page needs to be faded in*/
padding-left:50px;
padding-right:50px;
position:relative;
}
HTML:
<div class="pagecontainer">
<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>
<div id="page1">TONS OF TEXT HERE</div>
<div id="page2">A BIT OF TEXT HERE</div>
<div id="page3">BUNCH OF IMAGES</div>
</div>
说,例如,第1页拥有吨的文字,我不知道什么高度它会因为高度本身是动态的,如果我扩大浏览器窗口,那么明显需要的高度会缩小。第2页可能只有一点文字,所以需要的高度会小得多。第3页有一堆图像,但我不知道所需的高度(这是我的问题的重点,让脚本计算需要多少高度)。
如何调整“.pagecontainer”的大小以使其高度为完全适合每个页面上的内容,即使当我调整浏览器窗口的大小时?例如,如果我点击page1,那么容器会放大(用jQuery的.animate()动画),然后如果我点击page2,那么容器会缩小。
这里是一个图像描述:http://i.imgur.com/leOeJG0.png
感谢。
正如我所看到的,不需要函数expandPageContainer()
- 当没有容器可见并且您不需要计算高度的任何绝对值时,就会发生动画。
只需删除expandPageContainer()
的函数和函数调用,并将您的容器CSS设置为height: auto
并且您期望的行为将发生。根据高度调整容器的大小以适应其内容是一种默认行为。 (您可能想要删除margin-bottom
规则)
还要求fadeOut(0)
与hide()
相同。后者更有效一些。
我没有理由计算出身高 - 身高会自动改变。
jQuery的
$('.pagecontainer>div').fadeOut(0);
$('.link').on('click', function(e){
$('.pagecontainer>div').fadeOut(0);
$(this.getAttribute("href")).fadeIn();
});
HTML结构
<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>
<div class="pagecontainer">
<div id="page1">Block One</div>
<div id="page2"><img src="http://placehold.it/200x200" /></div>
<div id="page3"><img src="http://placehold.it/300x400" /></div>
</div>
http://jsfiddle.net/daCrosby/tmuC2/
编辑
根据你的意见,你需要它来上下动画,而不是淡入淡出。要做到这一点,使用animate([height:"show",speed)
和animate([height:"hide",speed)
如下所示:
$('.pagecontainer>div').animate({height:"hide"},500);
$(this.getAttribute("href")).animate({height:"show"},500);
我很难理解你的问题。我怎么能够完美匹配内容并同时在浏览器窗口中调整大小?我能想到的唯一方法就是调整内容的大小,但这不是你的观点吗? – jtheman 2013-03-12 23:25:29
容器将使用浏览器窗口调整大小。我把它设置在80%。意味着当我缩小视口时,容器变小,需要更多高度。举例来说,当视口为全尺寸时,需要400px的高度,以适合宽度为80%(构成数字,例如80%宽度为1000px)的大块文本。如果我将视口大小调整为50%,那么假设现在高度需要为700px以适合所有文本,宽度仍然是当前视口的80%(现在它将是500px)。我不明白这有什么困惑吗? – Windbrand 2013-03-12 23:32:23
任何div的默认设置是'height:auto;'通常会得到“完美贴合”? '$(“。pagecontainer”)。animate({height:'auto'},500);'应该工作吗? – jtheman 2013-03-12 23:36:15