jQuery horizontal list slider - LavaLamp

Question

I've been trying to recreate the "Budget" slider from the Hitmo website: http://hitmo-studio.com/contact.html#budget-panel-container

But I can't get it running as smoothly as the Hitmo slider: http://jsfiddle.net/XNBMr/1/

Things I need:

• Smoother animation
• Change the color of the text when "current" to white (no text-shadow) addClass on a tag?
• "Choose budget" shouldn't be selectable
• Allow "Blue box" to move when option has been clicked (won't move whilst still hovering)
• When hovering away from the blue box then back over it, the hover style below flashes through

I would greatly appreciate any assistance with this. I feel it's very close but I know there must be a more streamlined approached, and I want this to be as simple as possible. Thanks!

Answer 1

Let us see:

• Animation: You probably want "easeout" which starts fast, and slows down.
• White Text & Hover: Adding a class is pretty simple (but I worry about that css, it is not really created for performance; see vanseodesign or mozilla). I also removed a little of the waist but it really should be dropped and redone (it is pretty rough).
• Click & Budget: ummm, basic jquery events (I take it you found the code and tried to modify it); and preventing the budget from getting re-selected is just a simple conditional...

-- DEMO --