與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

我沒有使用咖啡，但最好的我可以告訴解決方案是.each()在$（「。ad」）選擇器上。現在，您$anims.children()適用於只是第一.ad的.copy S（或全部.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() 
    ) 

    });