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

这也不起作用。它似乎克隆标签并做一些事情。我认为它不起作用，因为你不能克隆身体标记。这或者是真的老了，不再与当前版本的JQuery兼容。

我担心自己已​​经编码到死路一条。有人知道我能做这个工作吗？

Answer 1

没有使用多个标签就无法淡化背景图像。所以最好的解决方案是在你的内部使用100％的宽度/高度，并在该div上使用bgImageTransition插件。

Answer 2

脏乱不堪，额外的标记，但如果你绝望：

• 底图内容后面一个div
• 设置它的尺寸，以配合身体
• 设置其不透明度为0
• 套装其背景图像
• 增加不透明度使其淡入

如果你反复在图像之间褪色，你可能可以在这个div和body之间交替它们，淡入淡出div。