Trocar fundo Tag Header

[murilosantana 0]

Tenho uma página , onde a tag <header> contem uma imagem de fundo .

 

Criei uma função em jquery , para trocar a imagem dando um fadeIn e fadeOut .

 

<script>

var id = 0;

var imgs = new Array();

imgs[0] = "img/header-bg.jpg";

imgs[1] = "img/header-bg1.jpg";

//Aqui apenas adicione mais imagens

function troca(){

if (id<imgs.length-1){

id++;

}else{

id=0

}

$("#topo").fadeOut(1000);

//setTimeout("$('#topo').css('<img src=\""+imgs[id]+"\" />');$('#topo').fadeIn(1000);",1000);

$('#topo').fadeout().css({'background-image':'url(./img/'+imgs[id]+')'}).fadein();

}

var segundos = 3; //Segundos entre cada imagem

setInterval("troca();",segundos*3000);

</script>

O problema é que quando é para aparecer a segunda imagem , a tag header some . Fiz um debug , e verifiquei que quando aciona a função JS , adiciona um display : none na tag .

Como resolver ?