I am looking to create a dynamic full-size background with a smooth fade effect. Currently, I have implemented the following code: 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();;
However, I am facing an issue with the current fade effect. Instead of smoothly transitioning between backgrounds by fading in the new one and then removing the previous one, it currently fades in and fades out simultaneously, resulting in a moment where there is no visible background or it is barely visible.
To improve this code, I need to make the following modifications:
Adjust the code to eliminate the gap between changing slides so that each background fades in before the previous one is removed.
Consider applying this as a background element rather than an image to ensure it does not interfere with other elements on the page.
Any assistance with these modifications would be greatly appreciated. Thank you in advance.