javascript - jQuery - 将高度动画化为自动

Question

在开始之前，我已经浏览了与此主题相关的其他问题。我写另一个问题的原因是因为我的网站将使用 jQuery 动画加载，但它的工作方式似乎与我只是自动设置高度动画不同。

我个人认为这与我在CSS中将CSS高度设置为auto有关。不管怎样，我希望网站(当它加载时)动画到自动高度，而不是目前的设定高度。我尝试过获取滚动高度并将其动画化为该值，但我尝试过的 3-4 个答案没有动画。

目前我正在使用:

$(".portfolio").animate({height:"590px"});

我的 .portfolio css 是

.portfolio {
  width: 0px;
  height: 0px;
  max-height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

可能会发现，在我对 .row(在 .portfolio 内部)进行动画处理之前，.portfolio 的高度为 0，因为 .row 已将显示设置为无。

基本上，我需要获取元素(.portfolio)的自动高度，即使由于隐藏元素而没有可见内容(使页面加载时的自动高度)设置为 0。

不透明度而不是显示:没有办法解决这个问题。我需要页面加载时 .PORTFOLIO 的高度为 0。

如果我可以发布其他任何内容以使其更容易，请告诉我

我尝试了与问题相关的答案: JavaScript jQuery Animate to Auto Height

您可以查看该网站:http://conorreid.me/portfolio/ 我真的希望可以发布网站链接。我觉得这个问题很难解释为什么我需要这个，希望你会明白。

编辑:
我复制了 .portfolio 元素并将其重命名为portfolio-2，将其设置为绝对值和z-index:-100，并将不透明度设置为0(高度为auto)。然后我尝试获取该元素的高度(我的显示器上为 558)并将 .portfolio 设置为该高度

var el = $('.portfolio-2'),
                curHeight = el.height(),
                autoHeight = el.css('height', 'auto').height();
            $(".portfolio").height(curHeight).animate({height: autoHeight}, 1000);

但现在我只是不确定为什么这不起作用......我实际上正在使用

<script>alert($(".portfolio-2").css("height"))</script>

提醒我高度，我的显示器分辨率为 264，但是在页面完全加载并输入 $(".portfolio-2").height() 后，我得到了 592，就像我应该的那样做..

Answer 1

经过一个多小时的尝试找到修复后，它是:

• 我复制了 .portfolio 及其内部的所有内容，我将其不透明度设置为 0，将 z-index 设置为 -1000，因此在可悬停/可选择的位置中没有任何元素会触发 jQuery 悬停效果。

最后修复了我遇到的可怕的高度错误(因为当我加载页面时图像没有渲染，给了我 40%~ 我更改的正确值的错误答案

$(document).ready(

至

$(window).load(

现在它具有响应能力=D