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: 
[jsBin demo](http://jsbin.com/igohup/edit#javascript,html,live)
===============================================================

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

```
Try this:

```
var newsItem = $('div.ticker p');
var index = 0;
function doit(){
    if(index < newsItem.length) {
        var p = newsItem[index++];
        $(p).animate({top: '-3em'}, 1500, doit);        
    }
}
doit();

```