4

有谁知道为什么这动画很好：

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

即固定高度，但这根本没有动画？

function setContainerHeight() {
    $(".pagecontainer").animate({
        height: 'auto'
    }, 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>

有不同的 div 淡入/淡出，每个都需要不同的高度。页面的宽度也是动态的，但不需要动画，只需使用视口拉伸/收缩。

谢谢。

4

4 回答 4

7

演示http://jsfiddle.net/zbB3Q/

Animate 不知道结束高度。你需要得到它然后动画，但要做到这一点，你必须快速设置高度并返回到动画之前的状态。

function setContainerHeight() {
    var heightnow=$(".pagecontainer").height();
    var heightfull=$(".pagecontainer").css({height:'auto'}).height();

    $(".pagecontainer").css({height:heightnow}).animate({
        height: heightfull
    }, 500);
}
于 2013-03-13T18:44:55.377 回答
2

根据经验，我遇到了同样的问题，但你不能动画到auto. 但是，您可以事先获取容器高度，然后对其进行动画处理。例如。

function setContainerHeight() {
    newHeight = $('.pagecontainer').height();
    $(".pagecontainer").animate({
        height: newHeight
    }, 500);
}
于 2013-03-13T18:44:22.503 回答
0

在这里聚会有点晚了，但我在一些代码中遇到了完全相同的问题。我写了一个小的 jQuery 插件来解决这个问题 -如果你仍然需要解决这个问题，它可以在这里找到。

于 2014-01-19T11:45:21.963 回答
0

我做了一个小插件来处理这个问题——应该相当简单，基于已在此处发布的 Darcy Clarke 的方法，并进行了一些（imo）非常必要的改进。jQuery 即插即用：

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin

于 2014-03-18T07:23:27.317 回答