javascript - jQuery/Javascript 动画按时间间隔改变 css 值

Question

我在类名“image-part”下创建了几个 div 元素，并尝试使用此脚本为它们设置动画:

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

没有任何事情发生，有人可以帮忙吗？ 谢谢!

Answer 1

问题是因为 setInterval() 处理程序中 this 的范围不会是对任何 .image-part 的引用> 元素。

要解决此问题，您可以重新安排逻辑，以便在间隔内执行 each() 循环，如下所示:

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

请注意，我通过使用提供的函数对 css() 进行一次调用，将逻辑更改为更加简洁。不过，结果与您的初衷相同。