不使用显示的 jQuery 效果：无答案

【问题标题】：jQuery effects without using display: none不使用显示的 jQuery 效果：无
【发布时间】：2016-01-23 18:00:09
【问题描述】：

我正在使用 jQuery 和 jQuery UI 创建一个网页。大多数元素在进入视口时会淡入，这很好用。但是，我有一个问题。

要让元素褪色，它们必须从不可见开始，所以我给它们添加了display: none。当它们淡入时，它们会改变包含 div 的大小。

这是一个问题，因为我有一个自定义的平滑滚动功能，可以将您缓慢地带到页面的某个部分（而不是立即使用链接）。它通过检测目标元素与页面顶部的偏移量来工作。当您向下滚动并且元素淡入时，它们会使页面变长并因此改变目标元素的偏移量，从而导致滚动在目标元素出现之前停止。

有没有办法让元素在没有display: none的情况下开始动画？

注意：我不能使用opacity！请不要用这个发布答案！我使用更高级的效果，如Fold 和Slide In，这是不透明无法实现的。另外，我还没有发布代码，因为我在询问 jQuery 是否有任何参数不使用display: none

【问题讨论】：

是否可以选择使用opacity:0 而不是display:none？
不是真的，我使用其他效果以及淡入淡出，例如Fold effect。使用opacity 将是我可以做的各种动画的服务限制。
也许你可以在这里发布一些代码......
究竟是什么？（虽然我知道我应该）。到目前为止我所做的一切毫无意义，因为它无助于回答问题。

标签： jquery html css jquery-ui

【解决方案1】：

如果您希望一个元素不可见但仍计入定义其父尺寸，则应使用 CSS opacity 属性并将其设置为 0（opacity 采用介于 0 和 1 之间的参数）。

selector {
    opacity: 0;
}

但 flamur 是对的，您可能想在这里发布一些代码...

【讨论】：

创建一个 stacksn-p 来演示如果你以 opacity:0 开头的探针是什么；
我不能使用这个，因为我使用了其他效果，例如折叠

【解决方案2】：

我最终决定做以下事情：

将元素的 CSS 设置为 visibility: hidden
页面加载时，直接在动画元素之后创建新元素，具有固定的宽度和高度（与动画元素相同）。这充当占位符
将元素的 CSS 设置为 display: none 和 visibility: visible（该元素具有 display: none，因此无法看到）

然后当元素需要动画时

使用.remove() 删除占位符
在元素上开始动画（因此删除display: none）

所以基本上它为元素创建了一个占位符。占位符不包含任何内容，它只有一个固定的高度和高度。然后，当需要为元素设置动画时，移除元素并开始动画。

这不是最干净的方法，但它确实有效。您还可以创建一个函数来创建占位符（甚至编辑它并更改 CSS），将元素作为一个参数传递给动画，以及是否创建或删除占位符作为第二个参数：

function placeholder(element, action) {
    // CREATE PLACEHOLDER
    if (action == 'create') {
        var width = $(element).css('width') // To get 'px` on the end use .css()
        var height = $(element).css('height')

        // Create placeholder
        $('<div style"width: ' + width + '; height: ' + height + ;'"></div>')
        .insertAfter(element)
    }

    // REMOVE PLACEHOLDER
    if (action == 'remove') {
        // Remove placeholder
        $(element).next().remove()
    }
}

// CALLING THE FUNCTION
placeholder($('#element'), 'create')
placeholder($('#element'), 'remove')

【讨论】：