jQuery se desvanece entre las imágenes de fondo - jquery, css

Estoy intentando desvanecerme entre varias imágenes de fondo usando jQuery. Actualmente tengo:

$(document).ready(function() {
var i = 1;
setInterval(function(){
i = i + 1;
if(i>4) {
i = 1;
}
$(".page1").css({
"background":"url("../img/change/" + i + ".jpg")#131313",
"background-size": "cover",
"opacity":0.7
});
$(".page1").animate({ opacity: 1 }, { duration: 1600 });
},5000);
})

Sin embargo, esto está causando un notable desvanecimiento de lacolor de fondo "# 131313". En su lugar, estoy intentando que la imagen se desvanezca "sobre la parte superior" de las imágenes anteriores, haciendo que una se mezcle con la otra. ¿Cómo voy a hacer esto?

Respuestas

En los comentarios de la pregunta: "Si estás buscando fundir dos imágenes, necesitarás dos elementos, apilarlos uno encima del otro y luego ajustar la opacidad de cada uno en diferentes direcciones". - Chris Hardie

Para elaborar un poco más, animando fondo.No se admiten imágenes, pero sí los colores de fondo. Supongamos que configura una animación CSS para una transición de fundido, esto se aplicará al fondo pero no a la imagen, por lo que el efecto que usted ve (colores atenuados) es de esperar. Desafortunadamente, esto está presente tanto en CSS como en JQuery y no tiene una solución alternativa que no sea la de varios elementos.

Aquí hay un tutorial sobre cómo lograr esto: http://css3.bradshawenterprises.com/cfimg/