Javascript/jQuery动画达到动态高度? [英] Javascript/jQuery animate to dynamic height?

问题描述

有人知道为什么动画效果很好吗?

Does anyone know why this animates fine:

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

即固定的高度，但这根本没有动画吗?

i.e. a fixed height, but this doesn't animate at all?

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

它仍然会调整为自动大小，但是没有动画，只是捕捉到了它.

It still resizes to auto, but no animation, just snaps to it.

我的代码:

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淡入/淡出，每个需要不同的高度.页面的宽度也是动态的，但是不需要动画，只需要在视口中拉伸/缩小即可.

There are different divs fading in/out, each needing a different height. The width of the pages is also dynamic but doesn't need animation, just stretches/shrinks with viewport.

谢谢.

推荐答案

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

动画不知道结束高度.您需要先对其进行动画处理，但是要做到这一点，您必须快速设置高度并返回到设置动画之前的高度.

Animate doesn't know the end height. You'll need to get it then animate, but to do that you have to quickly set the height and return to what it was before animating.

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

    $(".pagecontainer").css({height:heightnow}).animate({
        height: heightfull
    }, 500);
}

这篇关于Javascript/jQuery动画达到动态高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！