JQuery img loop

Question

I am having trouble with an image animation and cant seem to figure it out.

<div id="img_loop">
  <img src="img/img1.jpg" alt="image1" />
  <img src="img/img2.jpg" alt="image2" class="hidden" />
  <img src="img/img3.jpg" alt="image3" class="hidden" />
</div>

Two of the images have the class of hidden which sets their css display=none;

I have these three images and want to do a continuous loop by switching between them being in the class 'hidden' so that its a slide of the three images where only one at a time is not hidden.

I was trying somthing along these lines

$(function(){
  setInterval("updateImage()", 2500);
})

function updateImage() {

  var $active = $('#img_loop img').not('hidden');

  var $next = $active.next();

  $active.fadeTo(1000, 1.0, function(){
    $active.addClass('hidden');
    $next.removeClass('hidden')
  })

}

Thanks for all the help :)

Possible duplicate of [Jquery animate. Display none css is not changing](https://stackoverflow.com/questions/4009375/jquery-animate-display-none-css-is-not-changing) — Ismail Farooq, Sep 05 '18 at 05:18
Duplicate: https://stackoverflow.com/questions/21230318/show-hide-images-continuously-200ms-each-with-jquery — Vishal Kamal, Sep 05 '18 at 05:32

Patrick Evans · Accepted Answer · 2018-09-05T05:45:31.360

Note next() won't do a round-robin lookup, meaning if the active image is the last one next() will not select the first image. You will need to do a check and select the first image in the case that it is at the end.

if($next.length == 0){
    $next = $('#img_loop img').first();
}

Your fadeTo is setting the already shown image's opacity to 1 when I think you mean to put it as 0. And you need to reset this on showing as fadeTo() sets the element's style property, which if not reset will remain at 0.

$next.removeClass('hidden').css("opacity","initial")

And lastly the not() method used the wrong selector, not('hidden') excludes elements named hidden ie <hidden>, the correct selector would be .hidden for the class.

var $active = $('#img_loop img').not('.hidden');

Demo

$(function(){
  setInterval("updateImage()", 2500);
})

function updateImage() {

  var $active = $('#img_loop img').not('.hidden');
  var $next = $active.next();
  if($next.length == 0){
     $next = $('#img_loop img').first();
  }
  $active.fadeTo(1000, 0.0, function(){
    $active.addClass('hidden');
    $next.removeClass('hidden').css("opacity","initial")
  })

}

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img_loop">
  <img src="https://placebear.com/g/64/64" alt="image1" />
  <img src="https://placebear.com/g/63/63" alt="image2" class="hidden" />
  <img src="https://placebear.com/g/62/62" alt="image3" class="hidden" />
</div>

Thank you very much, I had been looking at it and missing the simple things to correct my issues. This has been an amazing help! — Barkley101, Sep 05 '18 at 05:50

JQuery img loop

1 Answers1