JQuery - 淡入新的背景图像？

Question

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

我最近的任务是创建一个Flash网站的html版本。在Flash网站上单击身体时图像会发生变化。我用JQuery完成了这个。这个棒极了！但是......它不够“闪光”。想要在图像之间产生淡入淡出效果的力量。

这是我完全撤消的地方。

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

图像存储在称为照片的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插件。

Answer 2

肮脏的，额外的标记，但如果你绝望了：

• 在您的内容背后隐藏div
• 设置尺寸以匹配正文
• 将其不透明度设为0
• 设置背景图片
• 增加不透明度以淡化它

如果你反复在图像之间褪色，你可以在这个div和身体之间交替使用它们，使叠加div渐入和淡出。