So far, I’ve tried a bunch of things to the effect of the following, without success:
<script type="text/javascript"> var x = 0; while (true) { /* change background-image of #slide using some variation of animate or fadeIn/fadeOut with or without setTimeout */ x++; } </script>
Any ideas?
Answer
You can fade background colors but not background images. The way to work around this is to have your images as <img>
tags and hide them by default display:none;
. Give your images position:absolute
and z-index:-1
so they act like backgrounds and are behind everything else.
Here’s a quick example of images fading one after the other.
HTML
<img src=".." /> <img src=".." />
CSS
img{ position:absolute; z-index:-1; display:none; }
jQuery
function test() { $("img").each(function(index) { $(this).hide(); $(this).delay(3000* index).fadeIn(3000).fadeOut(); }); } test();