简单的jQuery段落渐变器

Simple jQuery Fader for Paragraphs

本文关键字：渐变 段落 jQuery 简单      更新时间：2023-09-26

我有一个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++;
}

问题是所有的段落都在同时淡入（在页面加载时）——而我一次只想淡入/淡出一个。

感谢您的帮助。

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

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

相关文章：