jqueryを使用した複数フレームのアニメーションループ

Question

次のシナリオを実行しようとしています。 ページには、3種類のバナーコンテナがあります。それらはすべて、現在3段落（.frame-1、.frame-2、.frame-3）のラッパー（ ".copy"）を含んでいます。

<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でアニメーションを作成しようとしています。 1つの広告でしか管理することはできませんが、3つの異なる広告がページにあると混乱します。 1つだけで、アニメーションはうまく動作し、うまくループします。 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 S）うまくいけば、この作品

に適用される/便利です：

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

    });