Slideshow with nth-child not working

[Juliettef]

I need some help in troubleshooting my code. I'm trying to make a slideshow with the first span showing then disappearing, following by second span showing, and so on.\[code\]<div class="flip" id="flip2" style="width:333px; background:#FA8219"> <span> <h1>First title</h1> <h2>First content</h2> </span> <span> <h1>Second Title</h1> <h2>Second content</h2> <h3>Second sub content</h3> </span> <span> <h1>Third Title</h1><br /> <h3>Third content</h3> </span> <span> <h1>Temptations-</h1> <h2>wine glass markers</h2> <h3>Third sub-content</h3> </span></div>\[/code\]My script:\[code\]$(document).ready(function(){ $('div#flip2.flip span:gt(0)').hide(); // Hide all spans except the first one setInterval(function(){ $('div#flip2.flip span:nth-child(1)').fadeOut(800,function(){ // Fade out first span $('div#flip2.flip span:nth-child(1)').next('span').fadeIn(800); // Fade in next span $('div#flip2.flip span:gt(1)').hide(); $('div#flip2.flip span:nth-child(1)').appendTo('div#flip2.flip'); // Append first span to div }) },3000);})\[/code\]CSS:\[code\]div.flip {display:block; height:315px; float:left; margin:0; padding:0; background-color:#234; overflow:hidden}div#flip2 span h1, div#flip2 span h2, div#flip2 span h3 {display:block; font:Arial, Helvetica, sans-serif; font-weight:200; color:#FFF; margin:0; padding:0}\[/code\]I almost get the slideshow I want, except that the first span always appears. The slideshow takes effect only on the 2nd, 3rd, and 4th spans, below the first span.Maybe some insights to help me... Thanks.