전체 화면 애니메이션 배경

Question

느린 페이드 효과로 전체 크기 배경 애니메이션을 만들고 싶습니다. 지금까지 나는이 있습니다 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();; 

, 페이드 효과가 작동하지 않습니다 나는 그것이 정말로 일하기를 바란다. 새로운 배경을 희미 해지는 대신 이전 배경을 지우지 않고 같은 시간에 페이드 인하 고 페이드 아웃합니다. 즉, 배경이 없거나 거의 볼 수없는 순간이 있음을 의미합니다.

1. 변화 코드가 약간 슬라이드를 변경 사이의 간격을 제거하기 위해, 그래서, 다음 둘을 동시에

   에서, 이전의 배경을 제거 페이드 : 그래서 기본적으로 나는이 코드를 수정해야 할 것입니다

2. 이것은 이미지가 아닌 배경이 될 것이므로 어쩌면 어쩌면이 방법을 적용하는 더 좋은 방법이있을 수 있습니다. 이 페이지의 뒷부분에있는 다른 항목에는 영향을 미치지 않습니다.

미리 여기

Answer 1

에 감사하는 것은 당신이 jQuery를 플러그인을 사용하는 가정 제안 하나 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

입니다

내가 아는

here is a cycle2 demo