jquery - 当我的幻灯片过渡到下一张幻灯片时，如何为图像设置动画

Question

我有 5 张不同的幻灯片。但是每张幻灯片在幻灯片中都有两到三个图像，应该在幻灯片中的不同位置进行动画处理，我该如何实现呢？或者是否有另一个 jQuery 插件可以让你这样做？

例如。 我有一张幻灯片，上面有汽车、云和太阳。因此，当用户悬停或到达此幻灯片时。汽车将动画到中心，然后云和太阳将动画并在汽车动画后自行定位。

在此处输入图像描述

score 2 · Accepted Answer

2

您需要一个视差滑块。在这里你可以看到一个例子。

于 2012-08-14T16:31:05.723 回答

score 1 · Accepted Answer

视差可能是一个潜在的解决方案，但我会更多地关注 Cycle 提供的选项。

它在幻灯片回调之前和之后提到了底部。所以理论上，你可以调用一个函数来将所有内容设置为动画，然后当下一张幻灯片出现时，为下一张幻灯片调用下一个动画（如果有的话）。

如果您的滑块在计时器上，这可能会很麻烦。要时刻铭记在心。

score -2 · Accepted Answer

那么你可以做几件事。你可以这样做，当鼠标悬停在图像上时，它会变成一个动画自己的 gif。

.background:hover {
background-image: url('<filepath>/animate.gif');
}

或者你可以做一个 jQuery 事件，当单击按钮或鼠标悬停时（在我看来有点棘手），每个单独的元素（可能通过 z-index 分层的单个图像）将动画和滑动超过。

如果您使用的是 jQuery 插件，我会推荐第一个选项。

3 回答 3