¿Cómo cambio la imagen de fondo usando la animación jQuery?

Quiero cambiar la imagen de fondo usando animación lenta, pero no funciona

$('body').stop().animate({background:'url(1.jpg)'},'slow'); 

¿Hay algo mal con la syntax?

Puede obtener un efecto similar al atenuar la opacidad de la imagen a 0, luego cambiar la imagen de fondo y finalmente volver a fundir la imagen.

Esto requerirá un div, detrás de todo lo demás en su página, que es tan ancho como el cuerpo.

  
...

Puede hacerlo tan ancho como la página usando CSS:

 #bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

Y luego anima sus propiedades.

 $('#bg') .animate({opacity: 0}, 'slow', function() { $(this) .css({'background-image': 'url(1.jpg)'}) .animate({opacity: 1}); }); 

Puede obtener más de un efecto de cruce, teniendo un segundo fondo div encima de este, que luego puede fundirse.

De la documentación jQuery:

las propiedades que no son numéricas no se pueden animar utilizando la funcionalidad básica de jQuery. (Por ejemplo, ancho, alto o izquierda pueden ser animados, pero no puede ser de fondo).

Fuente: http://api.jquery.com/animate/

No puede animar la adición / sustitución de una imagen de fondo. La URL está allí o no. No hay estado intermedio.

La forma de lograr esto puede ser hacer clic en un clic y agregar una nueva clase con la imagen de fondo. ¿Luego animar esto? ¿O se desvanece la imagen para revelar una nueva?

Utilizaría un div falso para cubrir el fondo como un elemento fijo y luego animar ese elemento, es decir:

   

Así es como lo hice:

 $(this).animate({ opacity: 0 }, 100, function() { // Callback $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){ // Callback of the callback :) $(this).animate({ opacity: 1 }, 600) }); });