full screen animated background

Question

I want to create a full-size background animating with a slow fade effect. So far I have this: jsfiddle

html:

<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />

css:

body, html{
margin:0;
padding:0;
background:black;
}
img{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
}

js:

function test() {
$("img").each(function(index) {
    $(this).hide();
    $(this).delay(10000 * index).fadeIn(10000).fadeOut();
});
}
test();; 

Also, the fade effect doesn't work in a way I want it really to work. Instead of fading in the new background and THEN removing the previous one, it fades in and fades out in the same time which means there is a moment where there is no background or it is barely visible, if you know what I mean. So basically what I need to modify in this code is:

1. change a code slightly to remove the gap between changing slides, so it fades in, then remove the previous background, not both in the same time

2. This will be a background, not the image, so maybe there is a better way of applying this, possibly somehow using a only. I don't want to affect any other items which will be placed later on this page.

thank you in advance

Answer 1

Here is one DEMO http://jsfiddle.net/yeyene/4CHse/1/

$('img').hide();
$('img').eq(0).show();

function anim() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(1000);
    $("#wrap img").first().fadeIn(1000);    
    setTimeout(anim, 1500);
}
anim();

Answer 2

I suggest you suppose to use a jQuery Plugin

here is a cycle2 demo