jQuery looped animation for child elements

Afternoon all!

I've got a small list of floated divs that I want to highlight one periodically. Basically I'm trying to display a workflow process. Using jQuery I want it to:

1. Get the first child of the parent div (#general process)
2. Add a class (i.e highlight) which changes the CSS
3. Add a short delay
4. Remove the highlight class
5. Find the next child item (if last to return to the first) and repeat steps 2-4

I'm trying to scratch my way through this but keep failing. Can anyone suggest the best way to achieve this looping animation? Thanks in advance for any suggestions!!

Here is my current HTML & CSS:

<div id="general_process"> 
    <div class="phase"> 
        <div class="number">1</div> 
        <h3>Some title</h3> 
        <p>Content goes here</p> 
    </div> 
    <div class="phase"> 
        <div class="number">2</div> 
        <h3>Some title</h3> 
        <p>Content goes here</p> 
    </div> 
    <div class="phase"> 
        <div class="number">3</div> 
        <开发者_C百科h3>Some title</h3> 
        <p>Content goes here</p> 
    </div> 
</div>

#general_process  {margin: 0; padding: 0; }
#general_process div.phase {  float: left; padding: 10px 25px; background: #f9f9f9; width: 254px; border: 1px soild #999999;}

---

(function (elements) {

    var i = -1;
    var className = 'highlighted';

    if (!elements.length) {
        return false;
    }

    function step() {
        elements.eq(i).removeClass(className);

        if (++i >= elements.length) {
            i = 0;
        };

        elements.eq(i).addClass(className);

        setTimeout(step, 3000);
    }

    step();

}($('#general_process').children()));

We use a closure to self-contain all the variables we use to track the state.

We then have a function step(), which executes every 3 seconds... it removes the class from the current element, loops back to the first element if we're currently on the last, and then adds the class to the target element.

View a sexy demo here