javascript - Text to text how I fix it

Question

I put text in <p> tags and the script is supposed to cycle through the <p>s, fading out the old text and fading in the new. My problem is that all the <p>s are shown at once which results in this:

How can I fix this?

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

Fiddle

Answer 1

Your code works and doesn't reproduce the mentioned effect/error, but it's not efficient, you can cache the objects and use .eq() method, you can also use the .fadeOut()'s callback function that is executed when animation is complete.

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/