在 jQuery 中添加和删除内容

Posted 2023-05-08

【中文标题】在 jQuery 中添加和删除内容

【英文标题】：Adding and removing content in jQuery

【发布时间】：2010-09-14 18:32:45

【问题描述】：

如果我使用 jQuery 创建一个添加空 div 的函数，在 div 创建的空白空间内执行一些动画，然后删除 div，浏览器永远不会为空 div 腾出空间（设置了高度和宽度）。

如果我不删除函数中的空 div，那么浏览器将创建所需的空间并且一切正常。但是，我确实需要在动画完成后删除 div 创建的空白空间。

有没有办法将 div 移除排队，以便浏览器显示所需的行为？

【问题讨论】：

你能提供你已经拥有的jQuery代码吗？

你确定你没有在动画完成之前移除 div 吗？你如何确保动画已经完成？

【参考方案1】：

有些jQuery效果有回调，会在效果之后运行，例如：

$('#someDiv').slideDown(100, function()  
    $(this).remove(); 
);

【参考方案2】：

通过在 jQuery 和 setTimeout 上进行 Google 搜索，我找到了一个让我走上不同轨道的示例。我认为问题出现了，因为 div 操作位于与实际动画不同的选择器上。即使动画仍在发生，这也会导致 div 被创建和删除。通过在 div 中添加一个简单的 animate 语句，将删除延迟到主动画完成后，我可以达到预期的效果。

【参考方案3】：

如果您使用 setTimeout 是否有效？-)

【参考方案4】：

问题是在你的函数结束之前 DOM 不会更新。所以使用 setTimeout 会导致 dom 更新，100 毫秒后你的函数的其余部分可以继续。如果您不想看到新的 div，我会将位置设置为绝对位置，将顶部设置为 -5000 之类的值。它会有尺寸等，只是不可见。您还可以将可见性（在 css 中）设置为隐藏，以防您担心它会显示在屏幕上。