How do I add FadeIn/FadeOut javascript effect during images change after a few seconds

Question

I have 2 images that changes after a few seconds. I want to add a FadeIn/FadeOut effect when these images changes.

<script>
    var img_tracker = "icon1";

    function changeImg()
    {
        var pic = document.getElementById("img1");

        if (img_tracker == "icon1") {
            pic.src = "images/icon1.png";
            img_tracker = "icon2.png";
        } else {
            pic.src = "images/icon2.png";
            img_tracker = "icon1";
        }
    }

    setInterval("changeImg()", 2000);
</script>

<img src="images/icon1.png" id="img1">

That is my current code, is there any way I can add fadeOut/fadeIn on every image change?

Answer 1

One possible solution is to use CSS transitions. Then, you can fade-out the current image periodically with setInterval() . Once the image is completely fade-out you can change the image source and fade-in . To detect the fade-out transition you can use addEventListener() over the "transitionend" event.

Example:

 var img_tracker = "icon1"; var pic = document.getElementById("img1"); function changeImg() { if (img_tracker == "icon1") { pic.src = "https://via.placeholder.com/150/FF0000"; img_tracker = "icon2"; } else { pic.src = "https://via.placeholder.com/150/0000FF"; img_tracker = "icon1"; } } function fadeIn() { pic.classList.remove("fade-out"); pic.classList.add("fade-in"); } function fadeOut() { pic.classList.remove("fade-in"); pic.classList.add("fade-out"); // Add listener to the "transitionend" event. pic.addEventListener("transitionend", function x() { // Remove the previously added listener, change // the image and fade-in the new image. pic.removeEventListener("transitionend", x); changeImg(); fadeIn(); }); } setInterval(fadeOut, 5000);

 .fade { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .fade-out { opacity: 0; } .fade-in { opacity: 1; }

 <img id="img1" src="https://via.placeholder.com/150/0000FF" class="fade">