JQuery - Fade in new Background Image?
- by JasonS
Hi,
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?
