jquery - 根据内容大小设置动画并调整 div 动态高度

Question

有谁知道是否可以对 div 的大小进行动画调整，使其大小完全适合内容？高度必须是动态的，这意味着如果我调整浏览器窗口的大小，那么 div 的高度将会增加/减少。我已经拥有视口(viewport) 80% 的动态宽度。

这是我目前用来对容器大小调整进行动画处理的方法，调整大小部分可以工作，但动画不会在调整大小时播放。当我将高度设置为固定高度时，请说:

$(".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，则容器将缩小。

这是图像描述:/image/7bkAG.png

谢谢。

Answer 1

我没有理由计算高度 - 高度会自动为你改变。

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/