How can I incorporate a Slide-in Transition Effect for an Image when the img src is updated?

Question

How can I incorporate a Slide-in Transition Effect for an Image when the img src is updated?

The image tag in my .HTML file looks like this:

<img id="xyz"/>

Within the JavaScript portion, I have the following code:

let i = 1;
let images = ["src1", "src2", "src3", "src4", "src5"];

let imgDiv = document.getElementById('xyz');
imgDiv.src = images[0];

setInterval(() => {
    momentDiv.src = images[i];
    i++;
    if(i == images.length) i=0;
}, 5000);

The image within imgDiv is now switching every 5 seconds.

How can I add animation or transition to the image when the "src" property changes?

Please provide a solution without using jQuery.

javascript html css

Answer 1

Answer №1

Unfortunately, achieving the desired result in this manner is not feasible.

In order to create a slide effect, you must have a minimum of 2 images. You will need to update the source of your second image and position it above the first image. The second image should then become the new first image (copying the source of the old second image to the original image tag and repeating the algorithm).

let i = 1;
let images = ["https://picsum.photos/200/200/?image=663", "https://picsum.photos/200/200/?image=662", "https://picsum.photos/200/200/?image=661", "https://picsum.photos/200/200/?image=660", "https://picsum.photos/200/200/?image=659"];

let imgDiv = document.getElementById('xyz');
let imgSecond = document.getElementById('zyx');

imgDiv.src = images[0];

setInterval(() => {
    imgSecond.src = images[i];
    imgSecond.classList.add('active');
    i++;
    if(i == images.length) i=0;
  
    setTimeout(function() {
      imgDiv.src = imgSecond.src;
      imgSecond.classList.remove('active');
    }, 1500); // the same time as transition animation at css.
}, 2000);

.wrap {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.wrap > img {
  position: absolute;
  top: 0;
  left: 0;
}

.wrap > img#zyx {
  top: 200px;
}
.wrap > img#zyx.active {
  top: 0;
  transition: top 1.5s;
}

<div class="wrap">
  <img id="xyz" width="200" height="200"/>
  <img id="zyx" width="200" height="200"/>
</div>

We sincerely hope that this guidance proves beneficial to you.

Answer 2

Unfortunately, achieving the desired result in this manner is not feasible.

In order to create a slide effect, you must have a minimum of 2 images. You will need to update the source of your second image and position it above the first image. The second image should then become the new first image (copying the source of the old second image to the original image tag and repeating the algorithm).

let i = 1;
let images = ["https://picsum.photos/200/200/?image=663", "https://picsum.photos/200/200/?image=662", "https://picsum.photos/200/200/?image=661", "https://picsum.photos/200/200/?image=660", "https://picsum.photos/200/200/?image=659"];

let imgDiv = document.getElementById('xyz');
let imgSecond = document.getElementById('zyx');

imgDiv.src = images[0];

setInterval(() => {
    imgSecond.src = images[i];
    imgSecond.classList.add('active');
    i++;
    if(i == images.length) i=0;
  
    setTimeout(function() {
      imgDiv.src = imgSecond.src;
      imgSecond.classList.remove('active');
    }, 1500); // the same time as transition animation at css.
}, 2000);

.wrap {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.wrap > img {
  position: absolute;
  top: 0;
  left: 0;
}

.wrap > img#zyx {
  top: 200px;
}
.wrap > img#zyx.active {
  top: 0;
  transition: top 1.5s;
}

<div class="wrap">
  <img id="xyz" width="200" height="200"/>
  <img id="zyx" width="200" height="200"/>
</div>

We sincerely hope that this guidance proves beneficial to you.

Answer 3

Answer №2

If someone is still looking for an easy way to achieve a fade in and out effect (you can also add other effects), here's how you can do it:

const images = ["img1_url","img2_url", "img3_url", "img4_url"];

$(function () {
    let i = 0;
    $("#id_of_the_img_element").attr("src", images[i]);
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $("#id_of_the_img_element").fadeOut("slow", function () {
            $(this).attr("src", images[i]);
            $(this).fadeIn("slow");
        });
    }, 2000);
});

Answer 4

If someone is still looking for an easy way to achieve a fade in and out effect (you can also add other effects), here's how you can do it:

const images = ["img1_url","img2_url", "img3_url", "img4_url"];

$(function () {
    let i = 0;
    $("#id_of_the_img_element").attr("src", images[i]);
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $("#id_of_the_img_element").fadeOut("slow", function () {
            $(this).attr("src", images[i]);
            $(this).fadeIn("slow");
        });
    }, 2000);
});

How can I incorporate a Slide-in Transition Effect for an Image when the img src is updated?

Answer №1

Answer №2

Similar questions

The find functionality in Angular and Firebase seems to be malfunctioning

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

Implementing a Dynamic Navigation Feature using PHP in a Standalone File

The iOS website won't fully load until the button is tapped two times

invoking a Java servlet via JavaScript

What steps should I take to show my JavaScript WhatsApp icons once more?

What is the best way to update the text of an <a> element when it is clicked

Placing two images next to each other with accompanying captions

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

The functionality of Three.js arc drawing in canvas renderer seems to have encountered issues on Chrome

Tips on aligning multiple elements vertically in a justified manner

Converting a JavaScript object into HTML output

Display the final submenu of the Asp.net menu on the right side

What is the best way to adjust the body margin when using fixed navigation bars?

Break big files into pieces and upload them incrementally with nodejs

What steps do I need to take for webpack to locate angular modules?

Confirming the existence of a folder with AngularJS

Tips for aligning an image within a CSS-created bar graph

I'm struggling to make this background show up in a div

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone