javascript - 文字幻灯片在最初的2秒内彼此叠放

我的文字幻灯片在彼此叠加之前会叠加几秒钟，然后才能正常工作。
看起来是这样的：
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>

最佳答案

$('#textslider > div:gt(0)').hide();仅在加载jQuery之后执行。您可以通过将所有#textslider子代的display属性设置为none来将其简单地移动到css，除了第一个子代是这样的：

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

请参见example。

关于javascript - 文字幻灯片在最初的2秒内彼此叠放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36654314/