JQuery: 当元素隐藏时，防止 div 折叠

Question

当我的表单被提交时，表单会“滑出”，并使用$.get()加载另一个页面并将其滑入。在隐藏表单和显示下一页之间，div会折叠，所有页脚的内容都会短暂地出现在表单的位置。

然后，当“下一页”完成加载时，页脚回到底部（新页面内容下方）。由于表单的大小可以变化很多，我正在尝试避免为DIV指定高度。

有没有办法使div保持不变？ 代码：

$("#MyForm").hide("slide", { direction: "left" }, 250, function () {
    $.get("../NewPage.html", function (data) {
        $("#NewPagePlaceholder").html(data);
        $("#NewPagePlaceholder").show("slide", { direction: "right" }, 250);
    });
});

- Losbear

Answer 1

您是否正在使用CSS？我做一个假设（虽然不好，但我看不到任何代码），您使用display:none;来隐藏div，而应该尝试使用visibility:hidden。如果您正在使用JQuery，也许可以向选择器添加css()方法，并以这种方式将可见性设置为隐藏。

- dsgriffin

---

是的，我正在使用jQuery，并且正在使用.hide()和.show()来更改显示为“none”和“block”。我可以使用“visibility:hidden”，但是否有一种方法可以像我目前使用.hide()一样“滑动”它？ - Losbear

Answer 2

像@user1394965说的一样，这里有一个快速示例：

.hide()会使对象的css属性变为display: none，从而在页面上删除它所占用的空间。而visibility: hidden属性将使其隐藏，但仍保留其在页面上的空间。

因此，不要执行以下操作：

$('#elementId').hide();

请按照以下步骤操作：

$('#elementId').css('visibility', 'hidden');

- Q-Ball

---

我曾经使用.show()和.hide()来动画显示表单，但是在更改visibility:hidden时无法立即找到如何保持此行为，所以我采用了BlueBird的建议。它非常有效 - 谢谢！ - Losbear

Answer 3

上面提到的其他选项可能更好，但您可以选择根据子div设置高度，但是如果没有看到任何代码，很难知道这是否是一个好主意。

例如（未经测试）：

var height = $('#childdiv').height();
$('#childdiv').parent().css('height', height);

- BlueBird

---

标记了你的答案，因为你提供了代码 :) 但爆炸药也帮了我！- 谢谢大家 - Losbear

Answer 4

仅在动画期间为div指定高度。也就是说，在滑出旧表单之前，将div更改为相同的高度。在新表单滑入后，删除此设置的高度。

- Explosion Pills

---

我不能这样做，因为（如问题所述），该表单具有可变数量的字段，可能非常简短或非常长。 - Losbear

@Losbear 我不明白问题在哪里.. 为什么不直接获取表单的高度呢？ - Explosion Pills

如果我通过 .height() 获取高度，那么这只会在我在 CSS 中指定高度时才给出一个值吗？还是它返回 DIV 的渲染高度？ - Losbear