3

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

这是我目前用来为容器的调整大小设置动画的方法，并且调整大小的部分有效，但动画不会为调整大小而播放。当我将高度设置为固定高度时，说：

$(".pagecontainer").animate({
    height: '700px'
}, 500);

它动画了。但是如果我有 height: 'auto'，那么它就不会动画，只是捕捉到新的大小。

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

谢谢。

4

2 回答 2

2

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

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-13T00:07:24.210 回答
1

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

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

调用fadeOut(0)也是一样的hide()。后者效率更高一些。

于 2013-03-12T23:48:27.473 回答