Como faço para alterar a imagem de fundo usando animação jQuery?

Eu quero mudar a imagem de fundo usando animação lenta, mas não está funcionando

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

Há algo de errado com a syntax !!

Você pode obter um efeito semelhante ao desvanecer a opacidade da imagem para 0, depois alterar a imagem de fundo e, finalmente, desvanecer a imagem novamente.

Isso exigirá um div, por trás de tudo o mais na sua página, que é tão grande quanto o corpo.

  
...

Você pode torná-lo tão amplo quanto a página usando CSS:

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

E então animar suas propriedades.

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

Você pode obter mais efeito de crossover, tendo um segundo div de fundo em cima deste, que você pode então desvanecer.

Da documentação do jQuery:

propriedades que não são numéricas não podem ser animadas usando a funcionalidade básica do jQuery. (Por exemplo, largura, altura ou esquerda podem ser animadas, mas a cor de fundo não pode ser.)

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

Você não pode animar a adição / substituição de uma imagem de fundo. O URL está lá ou não. Não há entre o estado.

A maneira de conseguir isso pode ser adicionar onclick uma nova class com a imagem de fundo. Em seguida, animar isso? Ou desvanecer a imagem para revelar uma nova?

Eu usaria um div falso para cobrir o plano de fundo como um elemento fixo e, em seguida, animar esse elemento ou seja:

   

Aqui está como eu fiz:

 $(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) }); });