淡入/淡出文字幻燈片

Question

我試圖想出一種方法來實現某些文本的幻燈片效果，essentialy會自動啓動並顯示第一個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元素。

到目前爲止，我想出了一個nit來使它循環，我定義了一個負責添加各種效果的函數，一旦完成它再次調用它自己。我想我可以使用類添加到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); 
    }); 
}); 

差不多做什麼的，是淡出幻燈片的第一個孩子，在未來的孩子消失，然後追加的第一個孩子在2002年底h4系列