简单的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>