Adding fade function to JS script?

Question

So I have this basic script which alternates between three images and I'd like to add a simple fadein/fadeout/fadeto or whatever looks best so it's not so clunky. How can I achieve this? Or, is there a better way?

function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    document.getElementById("img").src = images[x];
    }
function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    document.getElementById("img").src = images[x];
    }
function startTimer() {
    setInterval(displayNextImage, 3000);
    }
    var images = [], x = -1;
    images[0] = "assets/img/logo1.png";
    images[1] = "assets/img/logo2.png";
    images[2] = "assets/img/logo3.png";

Answer 1

You can set the opacity of the images before you change the src:

function displayNextImage() {
    x = (x === images.length - 1) ? 0 : x + 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function displayPreviousImage() {
    x = (x <= 0) ? images.length - 1 : x - 1;
    var imgvar = document.getElementById("img");
    imgvar.classList.add("fadeOut");
    setTimeout(function() {
        imgvar.src = images[x];
        imgvar.classList.remove("fadeOut");
    }, 500);
}
function startTimer() {
    setInterval(displayNextImage, 3000);
}
    var images = [], x = -1;
    images[0] = "assets/img/logo1.png";
    images[1] = "assets/img/logo2.png";
    images[2] = "assets/img/logo3.png";

And in CSS:

img {
     opacity: 1;
     transition: opacity 500ms ease-in-out;
}
img.fadeOut {
    opacity: 0;
}

Note: I added a 500ms timeOut in javascript because I suspect that otherwise the animation wouldn't be visible at all because it would instantly go from visible to invisible to visible again.

Answer 2

You could place two image elements in the page. One for the current image and one for the next image.

Once the time to show the image has passed, apply a CSS class on the visible image to transition its opacity to 0.

Once the transition is completed, replace the image source with the next image to show. Position the image element behind the image element that is now visible to the user and remove the transition CSS.

Answer 3

You can try animate.css to animate the html tag every time you call one of the functions.

https://github.com/daneden/animate.css

Answer 4

You can use the following. Source, W3 Schools. See here for the jQuery include

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});

However, this uses jQuery. Depending on your limitations, you may not be able to use this. For further information on both the fadeIn(time) and fadeOut(time) functions, checkout W3's article!