最初の2秒間にテキストスライドショーを積み重ねてください。

Question

テキストスライドショーは、最終的に正しく動作するまで数秒間スタックされています。 次のようになります。 Stacked text slideshow これを修正するにはどうすればよいですか？ここでは、テキストのためのコードは次のとおりです。

  <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> 

そして、ここでは、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();はjQueryのロードされた後にのみ実行されます。

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

がexampleを参照してください：あなたはこのような最初のものを除くすべての#textslider子供たちのためにnoneに表示プロパティを設定することで、CSSに、この単純な動きをすることができます。