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: 
I think I have something that does what you are describing. 

**[View the jsFiddle](http://jsfiddle.net/jackrugile/ZexrM/)**

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](http://jsfiddle.net/jackrugile/uLB29/)**

Also, to see what is actually going on, remove overflow: hidden from div.ticker
```
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/)