How to fade changing background image

Question

I want to fade the images when I do this code:

$(\"#large-img\").css(\'background-image\', \'url(\'+$img+\')\');

I\'ve tried putting fade i

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

document.getElementById("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. In which case, the image will change without a transition. Given <1% of your users' browser don't support CSS3, that's probably fine. Don't kid yourself, it's fine.