Trying to make a transition with opacity on images

Question

like my title says, I'm trying to make a transition with opacity (0 to 1 with 2secondes interval) on images, but I don't know how to make it.

The transition only works on the first image but not on the others, and I can't figure it out why.

So I hope you'll help me to understand my mistakes, I'm new on javascript. Thank you in advance, here my code

My HTML file :

<img src="img/1.jpg" alt="slide-photo">

My CSS file :

#slideshow-home img {
    width: 100%;
    opacity: 0;
    transition: 1s ease-in-out;
}

My JS file :

var image = document.querySelector('img');
var img = 1 ;

window.setInterval(changeImage, 2000); 

function changeImage() {
    image.setAttribute('src', 'img/' + img + '.jpg'); 
    image.style.opacity = 1; 
    img++; 
    if(img === 6) { 
        img = 1; 
    }
}

try adding `transition: all 1s ease-in-out;` in your css or `transition: opacity 1s ease-in-out;` — Coupe, Nov 11 '20 at 17:10

Coupe · Accepted Answer · 2020-11-11T22:10:16.850

0

This is how i handle fade in transitions for images, the benefit is it doesn't start until the image has actually been loaded so it should never be choppy while fading in

JS

var image = document.querySelector('img');
var img = 1;

window.setInterval(changeImage,5000); 

function changeImage() {
    image.classList.remove('fadeIn')
    image.src = 'img/'+img+'.jpg'
    img++
    if (img == 6) {
      img = 1;
    } 
}

image.addEventListener('load', () => { // This function looks at the image and every time an image is loaded i.e whenever it gets a new src, it does a fade in animation
  void(image.offsetHeight)
  image.classList.add('fadeIn')
})

CSS

I normally do this with an animation, like below

#slideshow-home img {
    width: 100%;
    opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation:fadeIn 2s forwards;
}

edited Nov 11 '20 at 22:10

answered Nov 11 '20 at 17:18

Coupe

372
2
12

It still doesn’t work even with adding quotation marks... – Nov 11 '20 at 17:38
I edited the answer to show another method of doing what you are trying to do, Just ask if it doesn't work (I tested using some images and seems to work) or if you any questions about how it works – Coupe Nov 11 '20 at 18:44
Thank you very much for your help. But it don't seems to work as wanted. I explain, transitions works but the problem is that the images appears twice before the next image. I've tried to resolve but again I don't understand where is the problem in the code.. – Nov 11 '20 at 20:09
can you show like a screenshot or video of it, its hard to see whats going on because i dont have the img's to run the code how you like it, Is the image fading in twice? – Coupe Nov 11 '20 at 20:36
I think I cannot send a video... I try to explain better. When moving to an image, fade in transitions acts well. But when we are on an image, so whenever the index, there is like a blinking before to move on next image. – Nov 11 '20 at 21:17
I though first that you had posted another code but as I explained to you I tested the code you send me and It seems to have a problem, there is like a blink on the image before the fade in transition to the next image – Nov 11 '20 at 22:26
I just saw sorry and thank you again for helping me. But still a problem, I think it's a problem of offset. Before moving the next image, there is fade in like a blinking, and after it, it moves to the next image but now without any transition – Nov 11 '20 at 22:41

Trying to make a transition with opacity on images

1 Answers1