javascript - 段落的简单 jQuery 推子

Question

我有一个 DOM 元素，其中包含可变数量的段落:

<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>