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

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

```

I hope I have understood your question right.

[Live Demo](http://jsfiddle.net/tkR7y/15/)