полноэкранный анимированный фон

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%; 
} 

ЯШ:

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

Кроме того, эффект замирания не работает в Я хочу, чтобы он действительно работал. Вместо того, чтобы затухать в новом фоне, а затем удалять предыдущий, он исчезает и исчезает в одно и то же время, что означает, что есть момент, когда фона нет или он едва заметен, если вы знаете, что я имею в виду. Поэтому в основном то, что мне нужно изменить в этом коде:

1. изменить код немного, чтобы удалить разрыв между сменой слайдов, так что он выцветает, а затем удалить предыдущий фон, а не как в то же время

2. Это будет фон, а не изображение, поэтому, возможно, есть лучший способ применения этого, возможно, каким-то образом использовать только. Я не хочу влиять на другие элементы, которые будут размещены позже на этой странице.

спасибо заранее

Answer 1

Вот один 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

Я предлагаю вам предположить, чтобы использовать JQuery плагин

here is a cycle2 demo