jQuery .hide() 和 .show() 之间奇怪的交互

Question

我的网站中有两个元素位于同一个容器中。一种是可见的(display: block)，一种是隐藏的(display: none)。在事件中，我希望隐藏可见元素，并显示隐藏元素。问题是，当我在隐藏可见元素后显示隐藏元素时，它总是有一瞬间从可见元素顶部的先前堆叠位置跳到它应该位于的位置:

Velocity(document.getElementById("originallyVisible"), { opacity: 0 }, { display: "none" }, {duration: 500});
Velocity(document.getElementById("originallyHidden"),{ opacity: 1 },{ display: "block" },{duration: 500, delay: 200000});

注意:代码位于velocity.js 中，但根据文档，它应该相当于 native jQuery 中的.hide() 和.show()。如果问题是特定于速度的，请告诉我。

我认为这是由于两个命令彼此靠近而发生冲突，因此我为第二个命令添加了延迟。然而，无论延迟多久，问题仍然存在。

为什么会发生这种情况？

Answer 1

您指定这两个更改的持续时间为半秒，这意味着在大约半秒的时间内，两个元素都在屏幕上可见(一个淡入，另一个淡出)。

如果您不希望元素四处跳转，则需要确保如果两者都显示，则它们不会相互产生负面影响 - 也许可以通过设置 position:absolute 和定位它们在视觉上彼此重叠。

(顺便说一句，我不确定 delay 是否正确，即 200 秒？我想知道它是否在做任何事情。)