Shae LaRie Shae LaRie - 1 month ago 14
CSS Question

Fadeout in setTimeout in loop?

I am learning Javascript/Jquery. I have images going through this loop. I would like the images to fade in and out during transitions. I tried adding in a fadeout in the setTimeout and the whole div stopped showing. How can I do this?
This is my function...

var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 3000);


}


html....

<div class="w3-content" style="max-width:2000px;margin-top:46px;">
<div id="images" class="mySlides w3-display-container w3-center">
<img src="~/DisplayImages/training-barbell-muscles-hands-39613.jpeg" style="max-height:950px; width:100%; width:90%; vertical-align: middle;">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
<h1>MY TRAINER</h1>
<p><b>We had the best time playing at Venice Beach!</b></p>
</div>
</div>
<div class="mySlides w3-display-container w3-center" >
<img src="~/DisplayImages/woman-jogger-jogging-sport.jpg" style="max-height:950px; width:90%; vertical-align: middle;">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
<h1>MY TRAINER</h1>
<p><b>The atmosphere in New York is lorem ipsum.</b></p>
</div>
</div>
<div class="mySlides w3-display-container w3-center">
<img src="~/DisplayImages/breakfast-orange-lemon-oranges.jpg" style="max-height:950px; width:100%; width:90%; vertical-align: middle;">
<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">
<h1>MY TRAINER</h1>
<p><b>Thank you, Chicago - A night we won't forget.</b></p>
</div>
</div>
<div class="w3-container w3-content w3-padding-64" style="max-width:800px; margin-top:950px;" id="contact">
<h2 class="w3-wide w3-center">CONTACT</h2>
<div class="w3-row w3-padding-32">
<div class="w3-col m6 w3-large w3-margin-bottom">
<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>
<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>
<i class="fa fa-envelope" style="width:30px"> </i> Email: mail@mail.com<br>
</div>
<div class="w3-col m6">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
</div>
</div>
</div>
</div>
</div>

Answer

https://jsfiddle.net/uw6r6ud1/

var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {
   $(x[i]).hide();
}

myIndex++;

if (myIndex > x.length) {
    myIndex = 1;
 }

$(x[myIndex - 1]).stop().fadeIn(600);

setTimeout(carousel, 3000);
}

too tired to finish, sorry

used this http://api.jquery.com/fadeout/ and http://api.jquery.com/fadein/