有谁知道是否可以对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

感谢。

来源

2013-03-12 Windbrand

我很难理解你的问题。我怎么能够完美匹配内容并同时在浏览器窗口中调整大小？我能想到的唯一方法就是调整内容的大小，但这不是你的观点吗？ – 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

正如我所看到的，不需要函数expandPageContainer() - 当没有容器可见并且您不需要计算高度的任何绝对值时，就会发生动画。

只需删除expandPageContainer()的函数和函数调用，并将您的容器CSS设置为height: auto并且您期望的行为将发生。根据高度调整容器的大小以适应其内容是一种默认行为。（您可能想要删除margin-bottom规则）

还要求fadeOut(0)与hide()相同。后者更有效一些。

来源

2013-03-12 23:48:27 jtheman

我没有理由计算出身高 - 身高会自动改变。

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);

http://jsfiddle.net/daCrosby/tmuC2/1/

来源

2013-03-13 00:07:24 DACrosby

谢谢，但淡入/淡出是针对页面内容本身的。当我点击指向其他页面的链接时，我希望内容淡出。 – Windbrand 2013-03-13 01:07:51

是否这样？ http://jsfiddle.net/daCrosby/tmuC2/2/ – DACrosby 2013-03-13 08:41:37

根据内容大小动态调整div动态高度并调整其大小

回答

编辑

相关问题