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开始循环。
你可以通过为每个a的循环内的每个.gallery-canvas嵌套一个单独的循环来实现这一点：

$(".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等值。

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

＆＃13;

$(".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);
  });
});

＆＃13;

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

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/6ysw9ycq/1/

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

1 个答案: