Having trouble with jQuery's .next() method

Question

Alright, let's say that I have the following markup:

<div class="ticker">
    <p>News Item One. News Item One. News Item One. News Item One.</p>
    <p>News Item Two. News Item Two. News Item Two. News Item Two.</p>
    <p>News Item Three. News Item Three. News Item Three. News Item Three.</p>
    <p>News Item Four. News Item Four. News Item Four. News Item Four.</p>
    <p>News Item Five. News Item Five. News Item Five. News Item Five.</p>
</div>

I'm trying to animate them so that they appear one at a time, in a ticker box, using the following:

var newsItem = $('div.ticker p'),
    numberOfNewsItems = newsItem.length;
for(i=0; i < numberOfNewsItems; i++) {
    newsItem.eq(i).animate({top: '-3em'}, 1500).next('p').animate({top: '0em'}, 1500);
};

I would like for the paragraphs to animate in, and then animate out. This isn't working as required, and I can't figure out why. Anyone have any ideas?

If you want a jsFiddle to play with: http://jsfiddle.net/joshnh/tkR7y/

Answer 1

jsBin demo

Check out, this one has a 'pause on hover'. Thought you might need it.

var newsP = $('div.ticker p'),
    newsPn = newsP.length,
    c = 0,
    i;

function loopNews(){
    i = setInterval(function(){
            newsP.eq(c%newsPn).animate({top:'-3em'},900,function(){
                $(this).appendTo('.ticker').css({top:'3em'});
            });
            newsP.eq(++c%newsPn).animate({top:0},900);
    },2200);
}
loopNews();

$('.ticker').bind('mouseenter mouseleave', function(e){
    me_ml = e.type==='mouseenter' ?  clearInterval(i) : loopNews();
}); 

Answer 2

I think I have something that does what you are describing.

View the jsFiddle

Here is the commented JS, keep in mind a few tweaks were made to the CSS and an inner wrapper div was added. Let me know if that isn't what you were looking for or if you have any questions!

var ticker = $('div.ticker'),
    tickerInner = ticker.find('.ticker-inner'),
    tickerHeight = ticker.height(),
    tickerDelay = 3000,
    tickerSpeed = 1500,
    tickerInterval;

tickerInterval = setInterval(function(){     
    tickerInner.animate({'top' : '-='+tickerHeight}, tickerSpeed, function(){ // Animate top -= the height of the ticker
        $(this).find('p').first().appendTo(tickerInner); // Move the top, hidden p to the bottom
        tickerInner.css('top', 0); // This isn't totally necessary, I just like to keep my animation numbers low
    });
}, tickerDelay); // Call this every 3000ms

// Need to stop the ticker?
// clearInterval(tickerInterval);

EDIT: Slightly improved code here using setTimeout instead of setInterval. The ticker delay was inaccurate on the old one. View the jsFiddle

Also, to see what is actually going on, remove overflow: hidden from div.ticker