Here's a solution that seemed to work pretty well for me:
Put a div
element into the body like this:
<body>
<div id="hatter" style="height:100%;">
</div>
</body>
And make your javascript look something like this:
$(document).ready(function() {
var mutato;
mutato=0;
var kepek = new Array();
kepek[0] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/tower-bridge-100518.jpg")';
kepek[1] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/millennium-bridge-100521.jpg")';
kepek[2] = 'url("http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/ponte-vecchio-florence-1001037.jpg")';
function kepcsere()
{
$('#hatter').animate({opacity: 0}, 'slow', function() {
$(this).css({
'background-image': kepek[mutato]
}).animate({opacity: 1}, 'fast');
});
mutato++;
if (mutato>=kepek.length)
{
mutato=0;
}
setTimeout(function(){kepcsere()},5000);
}
kepcsere();
});
The goal of this method is to 1) fade out the div, 2) change the background-image, 3) fade the div back in.
Let me know if you have any questions!