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>

jquery

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

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

提前谢谢你

Answer 1

你只需要为每个.gallery-canvas重新开始你的循环。

为此，可以在for each .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。

这是因为乘以一个断裂值可以得到“off”结果，在您的例子中，我得到了像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：

​