javascript - 文本到文本我如何修复它

Question

我将文本放入<p>标签中，脚本应该在<p>s 中循环，淡出旧文本并淡入新文本。我的问题是所有<p>s 都同时显示，导致：

我怎样才能解决这个问题？

HTML：

<div id="container">
    <p>Hello</p>
    <p>World</p>
    <p>Lorem</p>
    <p>Ipsum</p>
</div>

CSS：

#container{ position:relative; }
#container p{ position:absolute; top:0; left:0; }

JavaScript：

$('#container p:gt(0)').hide();
setInterval(function () {
    $('#container p:first-child').fadeOut('slow')
        .next('p').fadeIn('slow')
        .end().appendTo('#container');
}, 1000);

小提琴

Answer 1

您的代码有效并且不会重现上述效果/错误，但效率不高，您可以缓存对象和使用.eq()方法，也可以使用.fadeOut()动画完成时执行的回调函数。

var $p = $('#container p'), i = 0;

$p.not(':first').hide();

setInterval(function () {
    $p.filter(':visible').fadeOut(function(){
        $p.eq( ++i % $p.length ).fadeIn();
    });
}, 2000);

http://jsfiddle.net/dAvcV/