带有jquery的多帧动画循环

Question

我正在尝试使以下方案正常工作。 在一个页面上，我有 3 个不同的横幅容器。它们都包含一个包装器（“.copy”），目前包含 3 个段落（.frame-1、.frame-2、.frame-3）。

<div class="ad-wrap ad-top">
    <div class="copy">
      <p class="frame-1">frame1 copy</p>
      <p class="frame-2">frame 2 copy</p>
      <p class="frame-3">frame 3 copy</p>
    </div>
  </div>
</div>
<div class="ad-wrap main-ad">
    <div class="copy">
      <p class="frame-1">frame1 copy</p>
      <p class="frame-2">frame 2 copy</p>
      <p class="frame-3">frame 3 copy</p>
    </div>
  </div>
</div>

<div class="ad-wrap ad-side">
    <div class="copy">
      <p class="frame-1">frame1 copy</p>
      <p class="frame-2">frame 2 copy</p>
      <p class="frame-3">frame 3 copy</p>
    </div>
  </div>
</div>

我正在尝试使用 jQuery 为它们设置动画。我只能使用一个广告进行管理，但是当页面上出现 3 个不同的广告时我会感到困惑。 只有一个，动画效果很好，循环很好。有 3 个广告，只是一团糟，框架一起出现或根本不显示:(

这是我写的脚本：

$(document).ready(function() {
  var loader_anim;

  $('.ad').each(function() {
      $(this).load('ads-source/index.html .ad-wrap', function() {
      var $anims, $frames, i, loopAnim;
      $anims = $('.ad .copy');
      $frames = $anims.children();
      $('.loader').delay(200).fadeOut();
      i = 0;
      loopAnim = function() {
        var frame;
        if (i <= $frames.length - 1) {
          frame = $frames[i];
          return $(frame).fadeIn('slow').delay(4000).fadeOut('slow', function() {
            i++;
            return loopAnim();
          });
        } else {
          i = 0;
          return loopAnim();
        }
      };
      return loopAnim();
    });
  });
});

我知道目前我的脚本依赖于这样一个事实，即所有广告都具有相同的帧数，我必须稍后对其进行调整以适应不同的场景。但目前我无法弄清楚如何让它在所有帧上同时工作。

我想有一些明显的东西我不明白。

Answer 1

我不使用咖啡，但最好的解决方案是 $(".ad") 选择器上的 .each()。现在，您的$anims.children() 仅应用于第一个.ad 的.copys（或页面上的所有.copys）

希望这可行/有帮助：

$(document).ready ->     
  #load ads
  $('.ad').each( function(){
      $(this).load('ads-source/index.html .ad-wrap', ->
        $anims = $(this).find('.copy');
        $frames = $anims.children()

        #frames anim engine
        i = 0
        loopAnim = ->
          if i <= $frames.length - 1
            frame = $frames[i]
            $(frame).fadeIn('slow').delay(4000).fadeOut('slow', ->
              i++
              loopAnim()
            )
          else
            i = 0
            loopAnim()
        loopAnim() 
      )

  });