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 sintaxis!!
Puede obtener un efecto similar atenuando la opacidad de la imagen a 0, luego cambie la imagen de fondo y finalmente vuelva a atenuar la imagen.
Esto requerirá un div, detrás de todo lo demás en su página, que es tan ancho como el cuerpo.
<body> <div id="bg"></div> ... </body>Puedes hacerlo tan ancho como la página usando CSS:
#bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }Y luego anime sus propiedades.
$('#bg') .animate({opacity: 0}, 'slow', function() { $(this) .css({'background-image': 'url(1.jpg)'}) .animate({opacity: 1}); });Podría obtener más un efecto de cruce, al tener un segundo div de fondo encima de este, que luego puede desvanecerse.
De la documentación de jQuery:
las propiedades que no son numéricas no se pueden animar con la funcionalidad básica de jQuery. (Por ejemplo, el ancho, el alto o la izquierda se pueden animar, pero el color de fondo no).
Fuente: http://api.jquery.com/animate/
No puede animar la adición/reemplazo de una imagen de fondo. La URL está allí o no. No hay estado intermedio.