gpt4 book ai didi

javascript - jQuery Slidedown 如何在显示之前获取隐藏项的最终高度?

转载 作者:数据小太阳 更新时间:2023-10-29 05:15:19 31 4
gpt4 key购买 nike

我正在尝试复制 jQuery slideDown()在 GSAP 中,我无法弄清楚 jQuery 如何计算当前隐藏的项目的高度,就好像它被设置为 height:auto .

我尝试在 GitHub 上搜索代码,但在 jQuery.fn.slideDown 中找不到任何似乎在执行此操作的代码或 jQuery.fn.animate它称之为。

SO上有几个类似的问题,提出了几个解决方案,似乎都有各自的问题:

  1. 克隆该元素,将其放置在屏幕外并计算其高度。

    如果该元素或其任何子元素具有由 CSS 样式设置的高度,它要求元素位于 DOM 中的原始位置(例如 .accordianItem 可能只有在其 .accordian 内部时才会设置样式)。

  2. 显示项目,移除height:0并在再次隐藏元素之前快速计算高度,然后声明动画。

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

  3. 使用 visibility:true在计算高度时将其显示在适当的位置。

    这将停止闪光并仍将元素保持在 DOM 中的相同位置以进行正确的高度计算,但它仍会插入其他元素它下面的项目因为visibility:false项目仍然有高度。

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

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

jQuery slideDown()每次都“正常工作”,所以我很想知道如何它是如何工作的,但我就是不知道它是在哪里工作的。我也很惊讶 GSAP 不能开箱即用,或者之前没有人分享过合适的解决方案。

我们将不胜感激任何帮助。

最佳答案

事实证明,如果您使用 $.height() 获取带有 display:none 的元素的高度,它不会返回 0 如您所料,它实际上设置了 visibility:hiddenposition:absolute 等,并将 display 设置为 block 给你正确的高度。我假设这是在进行下拉时在内部使用的内容。

这个回答对我帮助很大。

jQuery: height()/width() and "display:none"

只是想清楚这似乎如何避免我原来问题中的所有问题。它基本上是在执行数字 (3),但避免了将较低内容向下推到页面下方的问题,因为在计算高度时它也设置为 position:absolute。一个非常简单优雅的解决方案

关于javascript - jQuery Slidedown 如何在显示之前获取隐藏项的最终高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30014438/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com