淡入/淡出文本幻灯片

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

这是一个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);
    });
});

它的作用就是淡入slideshow的第一个子元素，淡入下一个子元素然后将第一个子元素添加到h4系列的末尾