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

这是一个使用递归函数的解决方案，它可以旋转元素并淡化第一个元素（我使用三秒而不是十秒来更容易看到效果）：

＆＃13;

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

＆＃13;

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

＆＃13;

段落的简单jQuery推子

1 个答案: