Повторите эффект затухания в аккордеоне

Question

У меня есть слайд-показ содержимого внутри карусели li.

Fade слайд-шоу отлично работает в первый раз, но когда он повторяет второй раз, слайд-шоу 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();  
//Slider 
    $('#news-container').vTicker({ 
     speed: 800, 
     pause: 6000 * quotes.length-1, 
     animation: 'fade', 
     mousePause: false, 
     showItems: 1 
    }); 

Вот FIDDLE

Подождите, пока не закончите 3 слайд спады, а затем, когда он начинает первый Ли снова то замирание ДИВ не отображается.

Answer 1

Рабочая DEMO здесь http://jsfiddle.net/yeyene/mvNEE/39/.

Очистите свои html-коды, не нужно использовать ul li, просто используйте все div.

У вас уже используется $ (". Inner_detail div").

HTML

<div class="editorial" id="news-container"> 
    <!-- This is the slide show--> 
    <div class="inner_detail"> 
     <!--First book--> 
     <div> 
      <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image1.jpg"> 
      <h1>Thrilling, Brave, and Controversial</h1> 
      <span>30 Pieces of Silver: An Extremely Controversial Historical Thriller</span> 
     </div> 

     <!--Second book--> 
     <div> 
      <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image2.jpg"> 
      <h1>Not quite What I Expected.</h1> 
      <span>The Book of Shadows : The Unofficial Charmed Companion</span> 
     </div> 

     <!--Third book--> 
     <div> 
      <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image3.jpg"> 
      <h1>I would give it many more than five stars.</h1> 
      <span>The Red Tent</span> 
     </div> 

     <div> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </div> 

     <div> 3) Lorem ipsum dolor sit amet more info more info more info more info </div> 
    </div> 
</div>