jQuery - 动画高度自动

Posted 2023-05-08

【中文标题】jQuery - 动画高度自动

【英文标题】：jQuery - Animating height to auto

【发布时间】：2016-08-25 18:01:47

【问题描述】：

在开始之前，我已经查看了与此主题相关的其他问题。我写另一个问题的原因是因为我的网站将使用 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;

在我为 .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（高度为自动）。然后我尝试获取这个元素的高度（我的显示器上的 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 我应该做..

【问题讨论】：

您不能将动画设置为“自动”。但是你可以使用max-height: 0;，然后动画到max-height: 100000px;。当然这需要overflow: hidden;。

@connexo 我可以获取元素的高度并动画到该高度，然后将 CSS 更改为自动。 ***.com/questions/5003220/…。我的问题是无法获得动画的“自动”高度，因为动画没有一个

我提出了一个不需要 Javascript 的解决方案。你试过了吗？

我没有，但是因为一切都建立在延迟之上，而且我不太擅长 CSS 过渡

你不能从一个没有高度的元素开始，然后期望 jQuery 弄清楚auto 会是什么。您必须实际渲染 auto 中的元素，然后获取类似 clientHeight 的内容才能准确了解 auto 的像素数。

【参考方案1】：

经过一个多小时试图在这里找到解决方法：

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

最后解决了一个可怕的高度错误（因为我加载页面时没有渲染图像，给了我 40% 的错误答案~我改变了正确的值

$(document).ready(

到

$(window).load(

现在响应了 =D