Javascript/jQuery 动画到动态高度？

Posted 2023-03-06

【中文标题】Javascript/jQuery 动画到动态高度？

【英文标题】：Javascript/jQuery animate to dynamic height?

【发布时间】：2013-03-01 21:16:54

【问题描述】：

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

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 淡入/淡出，每个都需要不同的高度。页面的宽度也是动态的，但不需要动画，只是随着视口拉伸/收缩。

谢谢。

【问题讨论】：

如果不阅读 jquery 代码，我猜 animate 不会知道它的结束高度。修复是找到它，然后给它一个整数动画。

【参考方案1】：

演示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);

【讨论】：

当var heightfull = $(".pagecontainer").css(height:'auto').height(); 被读取时，这不会触发 FOUC（无样式内容的闪烁）吗？

不，太快了，这不像是浏览器显示了一些内容后js等待body.onload。

我已经编辑了我的问题以包含我的 JS/CSS/HTML。 .pagecontainer 是整体容器，里面有几个 div 页面。页面发生变化，因此 .pagecontainer 应更改高度以反映它。我已经通过 var targetpage = $(this).attr("href"); 尝试了您的代码，然后获取了 targetpage 的高度，但它似乎不起作用。

var targetpage = $(this).attr("href");?那么你在用 targetpage （这是一个字符串）做什么？你是说var targetpage = $($(this).attr("href"));

【参考方案2】：

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

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

【讨论】：

这不会改变任何事情。

@popnoodles 啊是的你是对的，它没有，感谢教训。

【参考方案3】：

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

【参考方案4】：

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

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