修改

Question

有没有人知道是否可以为div的大小设置动画，以便它的内容大小合适？高度必须是动态的，这意味着如果我调整浏览器窗口的大小，则div将增加/减少高度。我的动态宽度已达到视口的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，则容器将缩小。

以下是图片说明：http://i.imgur.com/leOeJG0.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/

Answer 2

我认为没有必要使用函数expandPageContainer() - 当没有容器可见且你不需要计算高度的任何绝对值时，就会发生动画。

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

同时调用fadeOut(0)与hide()相同。后者效率更高。

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

2 个答案:

修改