Scrollable list items in jQuery

I have a list of 4 items and the ul has a background image that makes the second item look as though it has an arrow behind it. I want to be able to scroll the items up or down when they are clicked to the second items position so for example when I click the fourth item the whole list scrolls up so the fourth item is then postioned over the top of the background image and all the other items will be sitting in the same order above it.

I have tried using jQuery Tools with the circular option selected but it clones the first an last item and i end up with a gap when i get to the bottom and I also cant make each item selectable to scroll the list up or down.

Here is the code for the list

<div id="priceGuide">
    <ul id="priceRegion">
        <li><a href="#">North & Midlands</a></li>
        <li><a href="#">London, north of the river</a></li>
        <li><a href="#">London, south of the river</a></li>
        <li><a href="#">S开发者_JAVA百科outh & South East</a></li>
    </ul><!-- /priceRegion -->
</div><!-- /priceGuide -->

Any help is most appreciated.

Thanks

Giles

---

jQuery UI .animate sounds like it is what you want.

http://jqueryui.com/demos/animate/