Javascript/jQuery的动态高度动画？

Question

有谁知道为什么这个动画罚款：

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 /输出，每个需要一个衰落不同的高度。页面的宽度也是动态的，但不需要动画，只是用视口拉伸/缩小。

谢谢。

Answer 1

从经验来看，我有这个相同的问题，但你不能动画到auto。但是，您可以事先获得容器高度，然后制作该容器的高度。例如。

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

Answer 2

DEMO http://jsfiddle.net/zbB3Q/

动画不知道结局的高度。您需要获取它然后生成动画，但要做到这一点，您必须快速设置高度并返回到动画之前的状态。

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

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

Answer 3

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

Answer 4

我做了一个小插件，处理这个问题 - 应该是相当直接的，基于达西克拉克的方法已发布here，与一些（IMO）非常必要的改进。即插即用的jQuery：

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