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

Question

我已经使用 jQuery 好几天了，只是想真正地习惯它。所以，我想是时候建立一个新的个人展示/作品集网站了工作。

“作品”设置在带有图像背景集的 div 中（这是实际的“作品”）。

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

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

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

提前致谢！

Answer 1

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

Answer 2

您不能在背景图像上使用 .fadeIn()，但有一些变通方法，请参阅 A way to fade in the background on load? 更多讨论。