同時通過多組元素（類）的子元素迭代

Question

我試着同時循環多個塊引用列表。效果應該與您在Commercial Type網站上可以看到的效果一樣：您只能看到一個每.quotes，並在延遲之後進入下一個一個.quotes。

我的HTML結構如下：

<section> 
    <div class="quotes"> 
     <blockquote>Blockquote 1</blockquote> 
     <blockquote>Blockquote 2</blockquote> 
     <blockquote>Blockquote 3</blockquote> 
     <blockquote>Blockquote 4</blockquote> 
    </div> 
</section> 
<section> 
    <div class="quotes"> 
     <blockquote>Blockquote 1</blockquote> 
     <blockquote>Blockquote 2</blockquote> 
    </div> 
</section> 
<section> 
    <div class="quotes"> 
     <blockquote>Blockquote 1</blockquote> 
     <blockquote>Blockquote 2</blockquote> 
     <blockquote>Blockquote 3</blockquote> 
    </div> 
</section> 

在每個.quotes的引用文字應循環無限。我堅持的是我不知道如何在一組.quotes上同時迭代。我找到的所有解決方案都只針對一個容器（通常使用一個id）。

任何想法？

Answer 1

嘗試

$('.quotes').each(function(idx){ 
    var $quote = $(this); 
    $quote.children().hide(); 

    function showFirst(){ 
     var $first = $quote.children().first().fadeIn('slow').delay(2500).fadeOut('fast', function(){ 
      setTimeout(showFirst); 
      $first.appendTo($quote) 
     }) 
     } 

    setTimeout(showFirst, idx * 100); 
}) 

演示：Fiddle