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

Question

我的网站在同一个容器中有两个元素。一种是可见的（显示：块），一种是隐藏的（显示：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 中，但根据文档，它应该等同于原生 jQuery 中的 .hide() 和 .show()。如果问题是特定于速度的，请告诉我。

我认为这是两个命令彼此接近的冲突，所以我在第二个命令中添加了延迟。但是不管拖多久，问题依旧。

为什么会这样？

Answer 1

您指定的两个更改的 duration 都是半秒，这意味着在大约半秒的时间内两个元素都在屏幕上可见（一个淡入，另一个淡出）。

如果您不希望您的元素跳来跳去，您需要确保如果同时显示它们，它们不会相互影响 - 也许通过设置 position: absolute 并将它们放在顶部视觉上彼此。

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

Answer 2

velocity.js是否有类似JQuery的动画后的事件回调？

在此 JQuery 回调中，首先会在显示下一个元素之前隐藏一个元素：

$("#originallyVisible").fadeOut(300,function(){
    $("#originallyHidden").fadeIn(300);
});

另一种方法是使用具有平滑效果的 css 关键帧，在每个元素上设置时间并添加到 originallyVisible 一些 class 称为 .hideElement 和 originallyHidden apply .showElement

我觉得很有趣velocity.js，我会尽快查看。希望对您有所帮助:)

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

jQuery weird interaction between .hide() and .show()

jquery

velocity.js