I have a requirement to create a slideshow of images, where each image fades out before the next one fades in. It seems like a straightforward task.
<ul class="nav fading">
<li><?= anchor("#","Supported by",array("class" => "footer-heading disabled")) ?></li>
<li><?= img("assets/img/1.png") ?></li>
<li><?= img("assets/img/2.png") ?></li>
</ul>
Here is my current code:
$(document).ready(function(){
$(".fading img").hide(); //start with hiding all images
$(".fading img:first").fadeIn(4000); //fade in the first image
$(".fading img:first").fadeOut(4000,function(){
$(this).parent().next().fadeIn(4000); //fade in the next image after previous one fades out
});
});
I have successfully tested fading the same image back in after it has faded out:
$(document).ready(function(){
$(".fading img").hide();
$(".fading img:first").fadeIn(4000);
$(".fading img:first").fadeOut(4000,function(){
$(this).fadeIn(4000);
});
});
However, I encounter an issue when attempting to fade in the subsequent image in the sequence.