更改 div 的 z-index 并在鼠标悬停时具有淡入淡出效果

Question

我有 4 张图像堆叠在一起，如下所示：

我正在努力实现两件事：

1. 当鼠标悬停在背景中的图像上时， 图像应该以褪色效果出现在前景中。有 每个图像下方也有不同的文字，该文字应该出现在 前景。 （那里不需要褪色）

   结果应该是这样的：

2. 每隔 10-15 秒（无需用户输入），右侧的下一张图像应淡入 自动。

从技术上讲，我考虑将每个图像和文本放入一个单独的 div 中，并使用 z 顺序。使用jquery也许可以实现淡化效果，但不幸的是我之前没有使用过。

非常感谢任何示例代码、特定帮助或指针。

谢谢！

Answer 1

虽然不可能通过他的z-index来控制一个元素的fade 我们总是可以欺骗我们的眼睛所看到的。

DEMO GALLERY

我们可以做到：

• 在我们的图库中插入一个 DIV 元素，该元素将获取 当前图像的src 属性并将其设置为背景图像
• 隐藏当前图像，将DIV定位在该图像上.position()
• 淡入/淡出我们的 DIV
• 重置图片可见性

如果您有任何问题，请告诉我，我可以评论我的代码以使我使用的步骤更清晰。

愉快的编码

Answer 2

看看这个插件。只需探索一下，它有 100 多种不同的效果，您可能希望在自己的情况下使用它们。

http://jquery.malsup.com/cycle/browser.html