setTimeout not working as intended with css

Question

 var myIndex = 0; var lastIndex = null; var slides; window.onload = function () { slides = document.getElementsByClassName("mySlides"); slidePictures(); } function slidePictures() { slides[myIndex].style.display = "block"; slides[myIndex].className += " fadeIn"; console.log(slides[myIndex]); setTimeout(function () { slides[myIndex].className = "mySlides"; console.log(slides[myIndex]); setTimeout(function () { slides[myIndex].style.display = "none"; console.log("display none"); }, 1000); }, 2000); lastIndex = myIndex; myIndex++; if (myIndex >= 3) return; setTimeout(slidePictures, 4000); } 

 .slidesDiv>img { width: 80%; height: 80%; margin-left: 10%; opacity: 0; transition: opacity 1s; } .fadeIn { opacity: 1 !important; transition: opacity 1s; } 

 <div class="slidesDiv"> <img class="mySlides" src="//placehold.it/200x80/0fb"> <img class="mySlides" src="//placehold.it/200x80/0bf"> <img class="mySlides" src="//placehold.it/200x80/fb0"> <img class="mySlides" src="//placehold.it/200x80/0fb"> <h1 id="indicator"> Indicator </h1> </div> 

So my issue is that, the image fades in the first time, but then doesn't fade out afterwards, nor does it disappear?

It's definitely problem with the setTimeout functions and I'm wondering what I'm doing/assuming incorrectly.

Answer 1

I edited your code a bit for cleanliness and I also removed the extra transition from .fadeIn as you already had it part of slidesDiv>img .

In your example your program flow is a bit hard to understand, and you are using a lot of variables which are not clear where they come from (like slides and myIndex ) so that was part of the reason why it was difficult to figure why it was failing.

Hopefully I understood correctly what you were trying to achieve and the below should work for you. It's definitely not the best in terms of readability and you might be able to extract some of the nested setTimeouts into other functions, but I didn't want to modify too much of your initial code:

 var myIndex = 0; var lastIndex = null; var slides; window.onload = function() { slides = document.querySelectorAll(".mySlides"); slidePictures(slides); } function slidePictures(slides) { var time = 0; slides.forEach((slide) => { setTimeout(() => { slide.style.display = "block"; slide.className += " fadeIn"; setTimeout(function() { slide.className = "mySlides"; setTimeout(function() { slide.style.display = "none"; }, 1000); }, 2000); }, time); time += 4000; }); } 

 .slidesDiv>img { width: 80%; height: 80%; margin-left: 10%; opacity: 0; transition: opacity 1s; } .fadeIn { opacity: 1 !important; } 

Please see this Pen for complete example: http://codepen.io/rarmatei/pen/apramB

Answer 2

 var myIndex = 0; var lastIndex = null; var slides; window.onload = function () { slides = document.getElementsByClassName("mySlides"); slidePictures(); } function slidePictures() { slides[myIndex].style.display = "block"; slides[myIndex].className += " fadeIn"; console.log(slides[myIndex]); setTimeout(function () { slides[myIndex].className = "mySlides"; console.log(slides[myIndex]); setTimeout(function () { slides[myIndex].style.display = "none"; console.log("display none"); // Move indexes here lastIndex = myIndex; myIndex++; }, 1000); }, 2000); if (myIndex >= 3) return; setTimeout(slidePictures, 4000); } 

 .slidesDiv>img { width: 80%; height: 80%; margin-left: 10%; opacity: 0; transition: opacity 1s; } .fadeIn { opacity: 1 !important; transition: opacity 1s; } 

 <div class="slidesDiv"> <img class="mySlides" src="//placehold.it/200x80/0fb"> <img class="mySlides" src="//placehold.it/200x80/0bf"> <img class="mySlides" src="//placehold.it/200x80/fb0"> <img class="mySlides" src="//placehold.it/200x80/0fb"> <h1 id="indicator"> Indicator </h1> </div> 

Answer 3

It's pretty hard to tell what you're trying to achieve from your code. I assume that you want the pictures to fade in, and after a certain delay to fade out again? For that I would highly suggest you to use jQuery. Here's a fiddle I made. The slidePictures function would now just look like this:

    function slidePictures() {
      $(".mySlides").each(function(element){
      console.log(this);
      // 2000 is the duration of the fading in milliseconds
      $(this).fadeIn(2000, function(){
        // fadeout is delayed 4000 milliseconds
        $(this).delay(4000).fadeOut(2000);
        });
      });
    }

If that's not what you need, please provide additional information.

grwag