Criei uma função que muda a imagem de fundo do <body>
a cada 5 segundos, porém eu queria inserir também nessa função um efeito de transição entre as imagens: Fade Out para preto no inicio da transição e logo depois Fade In para a próxima imagem. Há algum jeito de fazer isso (seja com JQuery ou não)? Aqui está o código da função:
function BackgroundChange() {
var image = ["one","two","three","four","five","six","seven","eight"];
var index = 0;
window.setInterval(function BackgroundChangeSetImage() {
index = index + 1;
if ((index >= 0) && (index <= 7)) {
document.getElementsByTagName("body")[0].setAttribute("style","background-image: url('images/image_" + image[index] + ".jpg');");
} else {
index = -1;
return BackgroundChangeSetImage();
}
}, 5000);
}