Question

在开始之前，我已经查看了有关此主题的其他问题。我写另一个问题的原因是因为我的网站将使用jQuery动画进行加载，它似乎没有像我自动动画高度那样工作。

我个人认为这与我在CSS中将CSS高度设置为自动有关。无论如何，我希望网站（加载时）动画到高度自动，而不是此刻的设定高度。我已经尝试获取scrollHeight并将其设置为该值的动画，但是我尝试了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;
}

可能会感兴趣的是.portfolio的高度为0，直到我为.row（.portfolio内部）设置动画，因为.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，但是在页面完全加载后我输入$（＆＃34; .portfolio-2＆＃34;）。height（我得到592就像我应该做的那样..

Answer 1

经过一个多小时试图找到修复程序后，它是：

我复制了.portfolio及其中的所有内容，我将它的不透明度设置为0，将z-index设置为-1000，因此没有可以触发jQuery悬停效果的hoverable / selectable中的元素。

最后为了解决我遇到一个可怕的高度错误（因为当我加载页面时图像没有呈现，给我一个40％的错误答案〜正确值我改变了

$(document).ready(

到

$(window).load(

现在响应= D

jQuery - 动画高度为自动

1 个答案: