I'm unsure if fadeIn is even the right transition (newbie), but I'm basically trying to have a crossfade between homepage images that change every 3 seconds. The changing is working successfully, but I don't know how to get them to fade. Currently there is just an abrupt switch. Here is my code:

    var images = ["image-link1", "image-link2"];
$(function () {
    var i = 0;
    document.getElementById("homeImage").src = images[i];
    setInterval(function () {
        if (i == images.length) {
            i = 0;
        }
        else { 
            document.getElementById("homeImage").src = images[i];
            $(this).fadeIn("slow");
            i  ;
        }
    }, 3000);
});

I'm using ASP.NET MVC. Thanks!

CodePudding user response：

You have to fade out before that, you can add fadeOut before changing the elememt's background and then add fadeIn when the background has changed

CodePudding user response：

The steps will be

1. Show an image.
2. Fade out the current image.
3. After finished fading out, change the url to a new image.
4. Fade in to show the new image.

Working solution:

 $(function () {
    var i = 0;
    document.getElementById("homeImage").src = images[i];
    setInterval(function () {
        if (i == images.length - 1) {
            i = 0;
        }
        else { 
            $('#homeImage').fadeOut("slow", function() {
                document.getElementById("homeImage").src = images[i];
                $('#homeImage').fadeIn("slow");
            });
            i  ;
        }
    }, 3000);
});