JQuery fadeIn fadeOut not working
I am trying to learn jquery and I want to create a fadein and fadeout effect going through an image. I used the setInterval function for image processing, but only works for the first iteration.
$(document).ready(function() {
var newcount = 0;
var image = $(".image-store img");
image.hide();
var image_array = [];
image.each(function() {
image_array.push($(this).attr('src'));
});
var showimg = $(".image-disp img");
showimg.attr("src", image_array[newcount]);
setInterval(function() {
showimg.fadeOut(2000, function() {
newcount = newcount + 1;
showimg.attr("src", image_array[newcount]);
showimg.fadeIn(2000);
});
if (newcount == image_array.length) {
newcount = -1;
}
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-store">
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
</div>
<div class="image-disp">
<img src="">
</div>
+3
source to share
2 answers
$(document).ready(function() {
var newcount = 0;
var image = $(".image-store img");
image.hide();
var image_array = [];
image.each(function() {
image_array.push($(this).attr('src'));
});
var showimg = $(".image-disp img");
showimg.attr("src", image_array[newcount]);
setInterval(function() {
showimg.fadeOut(2000, function() {
newcount = newcount + 1;
showimg.attr("src", image_array[newcount]);
showimg.fadeIn(2000);
});
if (newcount == image_array.length) {
newcount = -1;
}
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-store">
<img width="50" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<img width="50" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="image-disp">
<img width="200" src="">
</div>
+1
source to share