Question

我在同一容器中的网站中有两个元素。一种是可见的（显示：块），另一种是隐藏的（显示：无）。在事件上，我希望隐藏可见元素，并显示隐藏元素。问题是，当我在隐藏可见元素之后显示隐藏元素时，它总是有一瞬间，从先前在可见元素顶部的堆叠位置跳到应该位于的位置：

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关键帧，在每个元素上设置时间，然后将一个名为.hideElement和originalHidden apply .showElement

的类添加到originalVisible。

我认为这是有趣的Velocity.js，我将尽快对其进行检查。希望对您有所帮助：）

.hide（）和.show（）之间的jQuery怪异交互

2 个答案: