Question

我尝试同时循环遍历多个blockquotes列表。效果应该与您在Commercial Type网站上看到的效果一样：每blockquote只能看到一个.quotes，延迟一段时间后会转到下一个blockquote一个.quotes { {1}}在另一个之后。

我的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

同时迭代多组元素（类）的子元素

1 个答案: