簡單的jQuery推子段落

Question

我有一個DOM element包含可變數量的段落：

<section id="paragraphs"> 
    <p>Here's a paragraph</p> 
    <p>Here's another one</p> 
    <p>Here's the third</p> 
</section> 

這些p元素是隱藏在我的CSS display:none;。

我想要做的是淡入第一段，在一段時間後（例如10秒）淡出。

一旦第一段淡出 - 我想以相同的方式顯示第二段（淡入，等待10秒，淡出）。

這應該重複每個段落（返回到第一段，並繼續當它通過它們全部）。

下面是我已經得到了JavaScript的（我已經嘗試了一些東西 - 都具有相同的結果，因爲這）：

// count paragraphs 
var numberOfParagraphs = $('#paragraphs').children.length; 

var x = 1; 

while (x<=numberOfTestimonials) { 
    $(".testimonials p:nth-child("+ x + ")").fadeIn().delay(10000).fadeOut(); 
    x++; 
} 

的問題是，所有的段落都在衰落同一時間（在頁面加載時） - 當我只想淡入淡出一次。

任何幫助表示讚賞。

Answer 1

下面是使用旋轉的元素和消失的一個是第一遞歸函數的解決方案（我用三秒，而不是十使其更容易看到效果）：

$('#paragraphs p').hide(); 
 
doFade('#paragraphs p:first'); 
 
function doFade(elem) { 
 
    $(elem).fadeIn(250).delay(3000).fadeOut(250, function() { 
 
     $(this).insertAfter($('#paragraphs p:last')); 
 
     doFade('#paragraphs p:first'); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="paragraphs"> 
 
    <p>Here's a paragraph</p> 
 
    <p>Here's another one</p> 
 
    <p>Here's the third</p> 
 
</section>