Have Geek Brain

JQuery - Fade in a new background image?

I guess I can try something that is impossible.

I was recently tasked with creating a html version of a flash site. On a flash site, when you click on the body, the image changes. I did it using JQuery. It's great! However .. this is not a "flash". Forces who want to achieve a fading effect between images.

Here I canceled completely.

This is how my script works.

Images are saved in files called div. It is hidden.

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

When the page loads, jquery checks if the first image has loaded. If it is not, then the loading symbol rotates. When the image is loaded, it becomes the background of the body.

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

I've tried the following.

I've tried animating. However, this doesn't work.

I tried this plugin: http://plugins.jquery.com/project/bgImageTransition

This doesn't work either. It seems to be cloning the tag and doing something. I'm guessing it doesn't work because you can't clone the body tag. This or is it really old and no longer compatible with the current version of JQuery.

I'm afraid I have coded my way to a dead end. Does anyone know how I can make this work?

+2


a source to share


2 answers


It is not possible to fade background images without using more than one tag. So the best solution would be to use 100% width / height right inside yours and use the bgImageTransition plugin on that div.



+2


a source


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

  • Lining a div behind your content
  • Set dimensions to fit the body
  • Set its opacity to 0
  • Set background image
  • Increase the opacity to dim it.


If you repeatedly fade between images, you can probably alternate between that div and the body, fading out the div overlay and exiting.

+2


a source






More articles:


All Articles