Tenho uma div que exibe uma série de imagens no seu background:
<div id="header-slider">
...
</div>
Para que as imagens passem em loop fiz o seguinte código em JQuery:
var imagens =
[
'url(imagem01.jpg)',
'url(imagem02.jpg)',
'url(imagem03.jpg)',
'url(imagem04.jpg)',
'url(imagem05.jpg)',
],imgindex = 0, $header = $('#header-slider');
setInterval(function()
{
$header
.css('background-image', imagens[imgindex++ % imagens.length]);
}, 3000);
Agora preciso que essa transição seja suave. Existem várias soluções para slider que utilizam elementos img mas não encontrei nenhum que manipule o atributo 'background-image'. Como posso fazer isso?