CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhinab Rajopadhyaya
Abhinab Rajopadhyaya

Reputation: 126

jquery fadeIn fadeOut effect not working

I'm trying to learn jquery and I want to create fadein and fadeout effect which loops through image. I have used setInterval function to loop through images but it works only for 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>

Upvotes: 2

Views: 81

Answers (2)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(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>

Upvotes: 1

ewwink
ewwink

Reputation: 19154

It works, but you're missing }); at the end of the code. Use the browser console to know if there is any error.

Upvotes: 2

Related Questions