My Science Is Better

Timed cycling of DOM elements using Javascript

I had the following sequence of code:

<ul id="parent">
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
    <li>test 4</li>
    <li>test 5</li>
</ul>

What i wanted to achieve was to add the class "selected" to the childrens of #parent one at a time, having some delay in between. When then next element is selected, then the element before it should lose the selected class.

Based on the great work of cmarshall at http://www.webmasterworld.com/javascript/3449722.htm and adding a bit of jQuery i was able to build a page using jQuery that does that.

I didn't bother to put the all the code here, you can just view source in the demo. The code is pretty much commented so you shouldn't have any problem understanding it.

You can click here to see it in action.