jQuery/Javascript animation changing css value on interval

Question

I have created several div-elements under class name "image-part" and am trying to animate them using this script:

$(document).ready(function() {
  $('.image-part').each(function() {
    var id = setInterval(frame, 3000);

    function frame() {
      if ($(this).css("visibility") === "hidden") {
        $(this).css("visibility", "visible");
      } else {
        $(this).css("visibility", "hidden");
      }
    }
  });
});

.image-part {
  width: 33.33%;
  height: 60px;
  background-color: black;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>

Nothing is happening, is there anyone that can help? Thanks!

Rory McCrossan · Accepted Answer · 2018-01-05 08:32:34Z

The issue is because the scope of this within the setInterval() handler will not be a reference to any of the .image-part elements.

To fix this you can re-arrange the logic so that you execute the each() loop within the interval, like this:

$(document).ready(function() {
  setInterval(function() {
    $('.image-part').css('visibility', function(i, v) {
      return v == 'visible' ? 'hidden' : 'visible';
    });
  }, 3000);
});

.image-part {
  width: 33.33%;
  height: 60px;
  background-color: black;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="image-part" style="visibility:hidden"></div>
<div class="image-part"></div>
<div class="image-part"></div>
<div class="image-part"></div>

Note that I changed the logic to be more succinct by using a single call to css() with a function provided. The outcome is identical to your original intention, though.

Collectives™ on Stack Overflow

jQuery/Javascript animation changing css value on interval

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related