使用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的.copy(或页面上的所有.copy)

希望这能起作用/有帮助：

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

  });