CSS jQuery - 展示图像(淡入淡出）

CSS jQuery - Showcase Images (Fade)

本文关键字：淡入淡出图像 jQuery CSS 更新时间：2023-09-26

我已经使用jQuery好几天了，只是想真正习惯它。所以，我想是时候为自己建立一个新的个人展示/作品集网站了，我目前正在制作一个交互式展示，它展示了一件作品，用户按下下一步按钮来移动显示下一件作品。

"工作

"被设置在一个div中，背景集是图像（这是实际的"工作"）。

基本上，我想知道是否可以淡出CSS背景图像，替换它，然后淡入？

我正在考虑为我的每个工作使用不同的div，每个div都有一个独特的css，带有dsiplay：none，并在用户单击"下一步"时使用jQuery淡入每个作品。但是，如果我有超过50件作品要展示，这可能会变得有点混乱。所以我只是想知道我是否可以有一个div，一个css，并使用jQuery淡出css背景图像，替换和淡入。

我还没有真正构建我的代码，因为我仍处于"想法"阶段：-/

提前感谢！

每张图片具有不同元素的优点是浏览器将预加载图像，并使应用程序看起来更具响应性，如果您面对另一个背景，您可能会及时加载它，并且在过渡期间可能会注意到，尤其是在低速连接上。我的想法是无论如何div 方法更好。

您不能在背景图像上使用 .fadeIn（），但有一些解决方法，请参阅加载时淡入背景的方法？以了解更多讨论。