StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJQuery - Fade in new Background Image?
text
Body
copied!<p>I think I may be trying something that isn't possible.</p> <p>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.</p> <p>This is where I have come completely undone.</p> <p>This is how my script works at the moment.</p> <p>Images are stored in a div called photos. This is hidden.</p> <pre><code><div id="photos"> <img src="image.jpg" alt="Some caption" style="#page-bg-color" /> </div> </code></pre> <p>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.</p> <pre><code>$("body").css('background', 'url(' + photos[currentImage]["url"] + ') no-repeat 50% 50% fixed ' + photos[currentImage]["background"]); </code></pre> <p>I have tried the following.</p> <p>I have tried animate. However, this doesn't work.</p> <p>I have tried this plugin: <a href="http://plugins.jquery.com/project/bgImageTransition" rel="nofollow noreferrer">http://plugins.jquery.com/project/bgImageTransition</a></p> <p>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.</p> <p>I fear that I have coded my way down a dead end. Does anybody know how I could make this work?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload