he implementado una función que cambia la propiedad background de una cabecera cada cierto tiempo, estoy intentado que la transición sea suave, mediante alguna función de jquery tipo fade in, pero no doy con la tecla ¿Alguien puede ayudarme?
Mi código JS es el siguiente:
var body = $('.main-header .container');
var backgrounds = [
'url(http://imagen1.jpeg)',
'url(http://imagen2.jpg)'];
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css('background', backgrounds[0]);