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 in so many places.

Thanks

Answer 1

This is probably what you wanted:

$('#elem').fadeTo('slow', 0.3, function() {     $(this).css('background-image', 'url(' + $img + ')'); }).fadeTo('slow', 1); 

With a 1 second delay:

$('#elem').fadeTo('slow', 0.3, function() {     $(this).css('background-image', 'url(' + $img + ')'); }).delay(1000).fadeTo('slow', 1); 

Answer 2

Can I offer an alternative solution?

I had this same issue, and fade didn't work because it faded the entire element, not just the background. In my case the element was body, so I only wanted to fade the background.

An elegant way to tackle this is to class the element and use CSS3 transition for the background.

transition: background 0.5s linear;

When you change the background, either with toggleClass or with your code, $("#large-img").css('background-image', 'url('+$img+')'); it will fade as defined by the class.