Javascript / jquery ScrollLeft build up
<p>I've been trying to build a timeline / tube line widget. The idea being that the user is presented with something which looks like a train line on the london underground - but will be populated with dates. Anyhow, this is what I've produced so far. It sort of works...</p>

<p><a href="http://jsfiddle.net/allegris/GCyVN/" rel="nofollow">http://jsfiddle.net/allegris/GCyVN/</a></p>

<ol>
<li><p>Build out track, and ensure that on page load, we're at the beginning of the track.</p></li>
<li><p>When hovering right
Scroll right, if not scrolling, and not at the end of the scrollable area.
On mouseOut, test to see if we're at a station. If we're not at a station, keep scrolling until we are, and then stop.</p></li>
<li><p>When hovering left
Scroll right, if not scrolling, and not at the beginning of the scrollable area.
On mouseOut, test to see if we're at a station. If we're not at a station, keep scrolling until we are, and then stop.</p></li>
<li><p>Figure out a way to switch direction when required.</p></li>
</ol>

<p>I'm still trying to learn javascript (bought the excellent eloquent javascript), but sort of get by in jquery... so I dare say that there is a far more elegant, and cleaner way to do this.</p>

<p>I opted to use scrollLeft because it was less juddery than animating (found info about this at jquery for designer) - however, I'm having the occasional issue when flicking back and fourth between the left and right scroll.... the scroll appears to accelerate... it builds up and gets faster and faster. I stuck in some variables to test if its scrolling or not etc, but this seems a bit hit or miss. I've re-written it 4 times, in a variety of ways...</p>

<p>I'm stumped... so if anyone can point me in the right direction (even if it means I've got to rewrite the lot) that would be great :)</p>

<p>Kind regards,
Rob</p>
