Javascript jQuery如何在显示隐藏项之前向下滑动获取隐藏项的最终高度？

我试图在GSAP中复制jQuery

slideDown（）

，但我很难确定jQuery如何计算当前隐藏的项目的高度，就像它被设置为

height:auto

我尝试在GitHub上搜索代码，但在它调用的

jQuery.fn.slideDown

或

jQuery.fn.animate

中找不到任何类似的代码

在这方面有几个类似的问题和提出的几个解决方案，所有这些似乎都有自己的问题：

克隆元素，将其放置在屏幕外并计算其高度。
如果元素或其任何子元素的高度由CSS样式设置，而CSS样式要求元素位于DOM中的原始位置，则此操作无效（例如，

.accordian项目

只有在其

.accordian

内时才可以设置样式）

显示项目，删除

高度：0

并快速计算高度，然后再次隐藏元素，然后声明动画。

这可能会在计算高度时快速闪烁内容

在计算高度时，使用

可见性：true

将其显示到位。

这将停止闪烁，并将元素保持在DOM中相同的位置，以便正确计算高度，但它仍会向下推送其下的其他项，因为

可见性：false

项仍然具有高度。

在项目隐藏之前计算项目的高度，并将其存储在数据属性中，以便我们在稍后打开项目时知道该高度。

如果任何动态内容在项目隐藏时更改了项目的高度，这将不起作用

jQuery slideDown（）

每次都“只是工作”，所以我真的很想知道它是如何工作的，但我就是不知道它在哪里工作。我也很惊讶GSAP不能开箱即用，或者以前没有人分享过正确的解决方案

---

非常感谢您的帮助。

如果您使用

$.height（）

要通过

display:none

获取元素的高度，它不会像您预期的那样返回

0

，它实际上设置

可见性：隐藏
，
位置：绝对
等，并将
display
设置为
block
以返回正确的高度。我假设这是在做一个向下滑动的动作

这个答案对我帮助很大


只是想弄清楚，这似乎可以避免我原来问题中的所有问题。它基本上是做数字（3），但避免了向下推低页面内容的问题，因为在计算高度时，它也被设置为位置：绝对。一个非常简单优雅的解决方案
调用.animate（{“height”：“show”}与.show（）不同。我仍然需要了解它是如何工作的，这样我才能复制它。您是否可以先单独使用jQuery的slideDown创建一个JSFIDLE效果？我有一些想法，我想通过GSAP验证一下。只是想弄清楚这似乎可以避免我原始问题中的所有问题。基本上是做第（3）项但是避免了向下推低页面内容的问题，因为在计算高度时，它也被设置为位置：绝对。这是一个非常简单优雅的解决方案。如果将上面的注释编辑到答案中，效果会更好。始终假设注释可能会消失。除此之外，我还没有查看jQueryce，但我认为它也可能检查元素父元素的宽度，并在绝对定位后设置元素的宽度以匹配它-在元素的位置设置为绝对后，高度通常会更改，因此如果不将其宽度与父元素的宽度匹配，则会收到错误的值。