Altere a imagem de fundo com animate

Não é possível alterar a imagem de plano de fundo de um elemento DOM com animate (título enganoso, desculpe por isso: P), então aqui está uma boa solução alternativa que obterá o efeito de aparecimento / desaparecimento gradual que você sempre quis ao alterar imagens .

Isso funciona primeiro reduzindo a opacidade da imagem atual para 0, tornando-a invisível e, quando terminar, aplique o novo estilo e torne a opacidade 1 novamente com um esmaecimento suave em efeito. Agradável. : D

$("#image").stop().animate({opacity: 0},1000,function(){
    $(this).css({'background-image': "url('/images/alt_image.png')"})
               .animate({opacity: 1},{duration:1000});
 });

Nota: A função de parada existe apenas para evitar que a fila de efeitos aumente muito, ou seja, se isso for acionado por um clique e o usuário clicar várias vezes, apenas a última animação será executada, todas as outras serão interrompidas.

Respostas relacionadas:

jQuery: Quando usar $ (document) .ready () e quando $ (window) .load ()