Несколько слайд-шоу divs за один раз

Question

Я создал простую тенденцию к исчезновению для контента, который работает нормально. Но когда я пытаюсь отобразить несколько div, которые имеют одинаковый эффект затухания, он не отображает все divs одновременно.

Второй 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 (с вашим эффектом) делиться один за другим. Все элементы 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 параметра эквалайзера быть больше кола сНа в inner_detail элемента. И при необходимости установите его на ноль.

Надеюсь, это помогло.

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(); 
});});