I am currently working on animating a 5 image slideshow by creating a fading effect between the images rather than just switching abruptly.
Here is my HTML structure:
<div id="slides">
<ul class="pics">
<li><img src="images1.jpg" /></li>
<li><img src="images2.jpg" /></li>
<li><img src="images3.jpg" /></li>
<li><img src="images4.jpg" /></li>
<li><img src="images5.jpg" /></li>
</ul>
</div>
Although my jQuery code successfully fades out each image, the next image simply appears without any transition. Can anyone spot what I might have overlooked?
var list2 = $('#slides .pics li');
list2.filter(':first').addClass('active').find('img').fadeIn(500);
setInterval(function() {
if( list2.filter('.active').index() !== list2.length - 1 ) {
list2.filter('.active').find('img').fadeOut(500, function(){
list2.filter('.active').removeClass('active').next().addClass('active');
});
list2.filter('.active').find('img').fadeIn(500);
}
else {
list2.filter('.active').find('img').fadeOut(500, function(){
list2.removeClass('active').filter(':first').addClass('active');
});
}
}, 4000);