jQuery change div background-image with fadeIn/Out

Question

I\'m trying to create a fadeIn/Out effect on a site I created (edit: site url deleted)

Everything works great except when you click on one of the colors in the color

Answer 1

This was the only reasonable thing I found to fade a background image.

Your CSS; now enhanced with CSS3 transition.

#foo {
  background-image: url('a.jpg');
  transition: background 1s linear;
}

Now swap out the background

$("#foo").css("background-image", "url(b.jpg)");

Or do it with native javascript

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)";

Voilà, it fades!

---

Obvious disclaimer: if your browser doesn't support the CSS3 transition property, this won't work.