Text Slideshow übereinander für die ersten 2 Sekunden

Question

meine Text Slideshow gestapelt für ein paar Sekunden aufeinander, bevor schließlich richtig funktioniert. So sieht es aus: Stacked text slideshow Was kann ich tun, um das zu beheben? Hier ist der Code für den Text:

  <div id="textslider"> 

      <div style="position: absolute; left: 50%;"> 
       <p style="position: relative; left: -50%; border: none;"> 
        <?php echo get_field('testimony1'); ?> 
       </p> 
      </div> 

      <div style="position: absolute; left: 50%;"> 
       <p style="position: relative; left: -50%; border: none;"> 
        <?php echo get_field('testimony2'); ?> 
       </p> 
      </div> 

      <div style="position: absolute; left: 50%;"> 
       <p style="position: relative; left: -50%; border: none;"> 
        <?php echo get_field('testimony3'); ?> 
       </p> 

      </div> 

      </div> 

Und hier ist der Code für den Schieber in jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 

    <script> 

$('#textslider > div:gt(0)').hide(); 

setInterval(function() { 
$('#textslider > div:first').fadeOut(500) 
.next() 
.fadeIn(1000) 
.end() 
.appendTo('#textslider'); 
}, 3000); 

     </script> 

Answer 1

$('#textslider > div:gt(0)').hide(); ausgeführt wird erst nach jQuery geladen wird. Sie können einfach bewegen diese zu css von Display-Eigenschaft auf keine für alle #textslider Kinder außer erste wie diese Einstellung:

#textslider div:not(:first-child) { 
    display: none; 
} 

Siehe example.