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

我不使用咖啡，但我可以告诉解决方案是{（1。}}在$（“。ad”）选择器上。目前，您的.each()仅应用于第一个$anims.children()的{{1}}（或页面上的所有.ad）

希望这有效/有帮助：

.copy

使用jquery的多帧动画循环

1 个答案: