不使用显示的jQuery效果：无

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

为了使元素褪色，它们必须开始不可见，所以我添加了

display:none

。但当它们淡入时，会更改包含div的大小

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

是否有任何方法允许在不显示的情况下启动元素动画：无

---

注意：我不能使用

不透明度

！请不要用这个来发布答案我使用了更高级的效果，如

折叠

和

滑入

，这是不透明度无法实现的。此外，我还没有发布代码，因为我在询问jQuery是否有任何参数不使用

display:none

如果您希望元素不可见，但在定义其父大小时仍计算在内，则应使用CSS opacity属性并将其设置为0（opacity参数介于0和1之间）

---

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

我最终决定执行以下操作：

• 将元素的CSS设置为可见性：隐藏
• 加载页面时，直接在动画元素之后创建新元素，具有固定的宽度和高度（与动画元素相同）。这充当占位符
• 将元素的CSS设置为

  display:none

  和

  visibility:visible

  （元素具有

  display:none

  ，因此无法查看）

然后，当元素需要设置动画时

• 使用

  删除占位符。删除（）

• 在元素上启动动画（因此删除

  display:none

  ）

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

这不是最干净的方法，但它是有效的。您还可以创建一个函数来创建占位符（甚至编辑它并更改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')

函数占位符（元素、动作）{
//创建占位符
如果（操作==“创建”）{
var width=$（element.css（'width'）//在最终use.css（）上获取'px'）
变量高度=$（元素）.css（'height'）
//创建占位符
$('')
.insertAfter（元素）
}
//删除占位符
如果（操作=='remove'）{
//删除占位符
$（元素）.next（）.remove（）
}
}
//调用函数
占位符（$（“#元素”），“创建”）
占位符（$（“#元素”），“删除”）

使用

不透明度：0

而不是

显示：无

会是一个选项吗？不太可能，我使用其他效果以及fadeIn，例如。使用

opacity

将是我能做的各种动画中的一个服务限制。也许你可以在这里发布一些代码……具体是什么？（虽然我知道我应该）。到目前为止，我所做的是毫无意义的，因为这无助于回答这个问题；我不能使用这个，因为我使用了其他效果，如折叠

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')