JQuery - Fade in new Background Image?

I think I may be trying something that isn't possible.

I was recently tasked to create a html version of the flash site. On the flash site when you click on the body the image changes. I have done this with JQuery. Its brilliant! However.. it isn't "flash" enough. The powers that be want a fade effect between images.

This is where I have come completely undone.

This is how my script works at the moment.

Images are stored in a div called photos. This is hidden.

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

When the page is loaded jquery checks to see if the first image is loaded. If it isn't then a loading symbol spins. When the image is loaded, it becomes the body background.

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

I have tried the following.

I have tried animate. However, this doesn't work.

I have tried this plugin: http:开发者_开发百科//plugins.jquery.com/project/bgImageTransition

This doesn't work either. It appears to clone the tag and do something. I assume it isn't working because you cannot clone the body tag. That or it is really old and is no longer compatible with the current version of JQuery.

I fear that I have coded my way down a dead end. Does anybody know how I could make this work?

---

There is no way to fade background images without using more than one tag. So the best solution would be using a with 100% width/height right inside your and using the bgImageTransition plugin on that div.

---

Filthy, and extra markup, but if you're desperate:

• Underlay a div behind your content
• Set its dimensions to match body
• Set its opacity to 0
• Set its background-image
• Increment the opacity to fade it in

If you're fading between images repeatedly, you could probably alternate them between this div and the body, fading the overlay div in and out.