javascript - 淡入/淡出文本幻灯片

Question

我正在尝试想出一种方法来实现某些文本的幻灯片效果，本质上它会自动启动并显示第一个 h4 元素，而不是淡出并淡入下一个，等等所有 h4 元素，一旦它到达最后一个它应该再次重复。

测试的示例标记是

<div id="slideshow">
    <h4 class="slideshow-element">Test 1</h4>
    <h4 class="slideshow-element">Test 2</h4>
    <h4 class="slideshow-element">Test 3</h4>
    <h4 class="slideshow-element">Test 4</h4>
</div>

其中 h4 基本上相互重叠并且最初是隐藏的。如果知道除了淡入和淡出之外如何添加更多 css 属性以实现各种效果，也将是一件很好的事情。我知道有一些插件可以执行此操作，但我想要一个特定的轻量级解决方案，该解决方案可以处理任意数量的 h4 元素。

到目前为止，我想出了一个让它循环的方法，我在其中定义了一个函数，该函数负责添加各种效果，一旦完成，它就会再次调用自身。我想我可以使用类添加到 h4 元素以将样式应用于它们，也许还可以进行转换？

Answer 1

Here's a JSFiddle

这是 JQuery:

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('h4').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

它的基本功能是淡出幻灯片放映的第一个子元素，淡入下一个子元素，然后将第一个子元素附加到 h4 系列的末尾