jquery - 延迟一个接一个地淡入div

Question

我想做这样的事情

图像应该从右边淡入并缩放到 100% 然后淡出到右边，反之亦然

那是我的code

问题是当第二个 .spinner 淡入时，它的行为与第一个不同，当它达到过渡的 75% 时，它会离开 .row

还有第三个出现在下一行，我试过 display:inline 但它不起作用

有什么帮助吗？

PS:忘掉红色按钮吧，过渡效果对一个 .spinner

也很好

Answer 1

您希望所有元素共享相同的运动。

因此，它们的初始位置必须相同。如果您在流程中使用元素，则不会发生这种情况。绝对定位它们:

.spinner {
    position: absolute;
    left: 500px;
}

我已经删除了很多不再需要的前缀，并添加了一些 z-index 更改。这并不完美，您需要稍微改进一下...

fiddle