仅在某些情况下延迟转换

Question

我在容器内部有4个叠加层（overflow: hidden），默认情况下水平翻译100％。 .active上的.overlay会将其设置为动态。 激活另一个从当前的一个中删除.active并将.active添加到新的一个。

现在我想要对“new active”元素进行转换延迟，因为同时为旧的和新的叠加层设置动画会导致视觉效果不一致（叠加层相互叠加等）。两个动画同时感觉太仓促。

我的第一个方法： 兄弟选择器延迟.active的所有兄弟姐妹的过渡，但没有成功，因为兄弟选择器看起来不是“后面”或“周围”......

第二种方法： 在父atLeastOneIsActive上课，然后将过渡延迟应用于.active。也没有工作，因为新的和旧的叠加然后得到转换延迟，使所有更糟糕。

不幸的是，我无法向您展示实例。 无论如何，这个问题更为普遍;但要获得结果的图片2截图

hover on either pin or link

overlay displayed

我正在寻找一种干净而甜蜜的方式在某些情况下应用延迟。 jQuery仅用于类管理。

Answer 1

  

激活另一个，从当前的一个中删除.active，并将.active添加到新的一个。

这是用jQuery .on("mouseover", function(){制作的“激活”吗？ 因为如果您以这种方式添加和删除类，为什么不在setTimeout上使用.addClass()？

<强> -------------------------
的修改

我做了一段时间 我非常肯定有一个解决方案......

让我说我找到了具体问题的确切性质，更确切地说。

我用小提琴复制了你的问题和解决方案 但在你看之前，请阅读我的解释：

图像过渡重叠 这是因为它们的宽度与动画起始位置有关。 因为它们被推到特定距离的视口的右外侧......

这个距离与图像的距离无关。它必须是两倍（最小）较大的图像 我通过将它们全部设置为相同的尺寸来找到它 这不是强制性的......但肯定是件好事！

所以，解决方案是将它们从视口右侧推出两倍“max-width”。

我做了一个小提琴并制作了4个按钮（代表你的地图别针）来动画图像。我还为他们分配了键盘编号，因此无需用鼠标定位按钮就可以更加轻松地观看图像。 ）

最后，有一个按钮“Toggle class equalSize”，它会强制图像大小相同。

<强> Have a look now!
：d

.active {
    right:0;
}
img{
    position:fixed;
    right:-1200px;
    top:100px;
    transition: right 2s;
}
.equalSize{
    width:600px;
    height:450px;
}