jquery 循环动画延迟从其他元素加起来

Question

我有一个图片库，我想为每张图片循环动画延迟。我的问题是我在同一页面上有不同画廊的选项卡，我希望循环为每个画廊重新开始，因为现在当您单击另一个选项卡时，其他画廊的延迟加起来并且它无法正常工作。

HTML

 <div class="tab-content">
 <div id="tab1" class="tab active">
 <div class="gallery-canvas">
 <a rel="gallery-1" href="" >
 <img src="" alt="">
 </a>
 <a rel="gallery-1" href="" >
 <img src="" alt="">
 </a>
 <a rel="gallery-1" href="" >
 <img src="" alt="">
 </a>
 <a rel="gallery-1" href="" >
 <img src="" alt="">
 </a>
 </div>
 </div>
 <div id="tab2" class="tab">
 <div class="gallery-canvas">
 <a rel="gallery-2" href="" >
 <img src="" alt="">
 </a>
 <a rel="gallery-2" href="" >
 <img src="" alt="">
 </a>
 <a rel="gallery-2" href="" >
 <img src="" alt="">
 </a>
 </div>
 </div>

j查询

      $(".gallery-canvas>a").each(function(index){
          $(this).css({
               'animation-delay' : 0.1*(1+index) + 's'
          });
    });

我需要的是让每个画廊 Canvas 循环重新开始，而不是将之前画廊 Canvas 元素的延迟加起来

提前谢谢你

Answer 1

您只需要为每个 .gallery-canvas 重新开始循环。
为此，您可以在每个 .gallery-canvas 的循环中为每个 a 嵌套一个单独的循环:

$(".gallery-canvas").each(function() {
  $(this).children("a").each(function(i) {
    $(this).css({"animation-delay": (1+i)/10+"s"});
  });
});

• 请注意，我将 0.1*(1+index) 更改为 (1+index)/10。
  这是因为乘以断裂会产生“关闭”结果，在您的情况下，我得到的值如 0.30000000000000004 和 0.6000000000000001。

请参阅下面的代码片段进行演示:

$(".gallery-canvas").each(function() {
  $(this).children("a").each(function(i) {
    $(this).css("animation-delay",(i+1)/10+"s");
    console.log($(this).attr("rel")+" - "+i+": "+ (i+1)/10);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tab-content">
  <div id="tab1" class="tab active">
    <div class="gallery-canvas">
      <a rel="gallery-1" href="" ><img src="" alt=""></a>
      <a rel="gallery-1" href="" ><img src="" alt=""></a>
      <a rel="gallery-1" href="" ><img src="" alt=""></a>
      <a rel="gallery-1" href="" ><img src="" alt=""></a>
    </div>
  </div>
  <div id="tab2" class="tab">
    <div class="gallery-canvas">
      <a rel="gallery-2" href="" ><img src="" alt=""></a>
      <a rel="gallery-2" href="" ><img src="" alt=""></a>
      <a rel="gallery-2" href="" ><img src="" alt=""></a>
    </div>
  </div>
</div>

jsfiddle:https://jsfiddle.net/6ysw9ycq/1/