Question

我为内容工作正常创建了一个简单的淡入效果。但是当我尝试显示具有相同淡入淡出效果的多个div时，它不会同时显示所有div。

第二个div在第一个div完成时开始动画。但我需要同时显示所有内容。

以下是我的代码和演示

var quotes = $(".inner_detail div");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

DEMO

Answer 1

美好的一天。此代码使每个inner_detail块一个接一个地显示（带有您的效果）div。所有inner_detail元素同时执行它。

function go()
{
    $(".inner_detail").each(function(){
        showNextQuote(this,0);
    });
}

function showNextQuote(inner_div,eq) {
    $(inner_div).find("div").eq(eq).fadeIn(2000)
        .delay(2000)
    .fadeOut(2000,function(){showNextQuote(inner_div,eq*1+1);});

}

go();

如果你想永远循环它，只需将chek eq参数设置为inner_detail元素中的div计数。如果是neede，请将其设置为零。

希望它有所帮助。

Answer 2

从您的演示小提琴中可以清楚地看到，有多个inner_div个容器，您的功能一次访问它们，因此无法实现多个幻灯片。因此，您必须遍历每个inner_div容器以立即达到多个幻灯片效果。

有很多可能性，下面是一个例子：

$(document).ready(function() {
    $(".inner_detail").each(function(){
        slideQuote(this,0);
    });

    function slideQuote(inner_div,eq) {
        if($(inner_div).find("div").size() == eq) {
            eq = 0;
        }
        $(inner_div).find("div").eq(eq)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000,
                 function(){
                     slideQuote(inner_div,eq+1);
                 }
                );
    }   
});

检查工作Demo Fiddle。

Answer 3

$(function(){
    var quotes = $(".inner_detail").get();
    $.each(quotes,function(index,value){
    var quoteIndex = -1;
    function showNextQuote() {
        ++quoteIndex;
        $(quotes[index]).find("div").eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
    }
    showNextQuote();
});});

一次多个幻灯片div

3 个答案: