Transição entre imagens de segundo plano declaradas na tag HTML CSS - jquery, css

Posso alterar minha imagem de plano de fundo com:

 $("html").css({background : "url(http://www.cyberth.com/images/background_aporia.jpg)"});

Como posso ter um desbotamento e desbotamento na transição entre as duas imagens. Se eu puder evitá-lo, não quero usar div dentro de Body para isso.

algo assim não parece funcionar:

 $("html").not("body").fadeOut("slow");

Definir a opacidade na tag html também cai em cascata, mesmo quando eu altero o índice z de html para 1 e body para 2.

Minha declaração de plano de fundo em css é assim:

 html {
background: url(http://www.cyberth.com/images/background_odonata.jpg)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Respostas:

Você não pode aplicar o plano de fundo ao html,mas para uma div com posição absoluta com 100% de largura e altura com índice z negativo. Então você deve ser capaz de fazer qualquer tipo de coisa nessa div sem afetar mais nada. Você poderia usar um plugin como o jquery cycle para isso. http://jquery.malsup.com/cycle/