JQuery - 淡入新的背景图片？

Question

我想我可能正在尝试一些不可能的事情。

我最近的任务是创建 Flash 网站的 html 版本。在 Flash 站点上，当您单击正文时，图像会发生变化。我用 JQuery 做到了这一点。这个棒极了!然而..它还不够“闪光”。当权者想要图像之间的淡入淡出效果。

这是我完全没有想到的地方。

这就是我的脚本目前的工作方式。

图像存储在名为 photos 的 div 中。这是隐藏的。

<div id="photos">
  <img src="image.jpg" alt="Some caption" style="#page-bg-color" />
</div>

当页面加载时，jquery 检查是否加载了第一个图像。如果不是，则加载符号旋转。加载图片时，它成为正文背景。

$("body").css('background', 'url(' + photos[currentImage]["url"] + ') no-repeat 50% 50% fixed ' + photos[currentImage]["background"]);

我尝试了以下方法。

我试过动画。但是，这不起作用。

我试过这个插件:http://plugins.jquery.com/project/bgImageTransition

这也行不通。它似乎克隆了标签并做了一些事情。我认为它不起作用，因为您无法克隆 body 标签。那个或者它真的很旧，不再与当前版本的 JQuery 兼容。

我担心自己的代码进入了死胡同。有谁知道我如何才能完成这项工作？

Answer 1

如果不使用多个标签，就无法淡化背景图像。因此，最好的解决方案是在您的内部使用 100% 宽度/高度并在该 div 上使用 bgImageTransition 插件。