Hi there,

I'm having some real trouble with what I thought would be some really simple animations. I've been using, or trying to use the jQuery plugin.

Basically I have a button, the mark up would probably (don't have to if anyone can come up with something better) look like this:

Code:
<button><span>Text in Button</span><i></i></button>
I've uploaded a pic, to show (very crudely), how the animation should work:

http://i39.tinypic.com/rj49ix.jpg

So, you have text with circle graphic on the end by default. When you hover over this element, the background should slide across. This could use another image, probably preferably, so 2 in totally, one for the left side and one for the right.

As well as this animation,the text should also slide, probably just 5/10px or so across. I guess this would all animate in reverse when moving the mouse off the element.

Does anyone have any ideas on this or can point me in the right direction? It would be greatly appreciated as ever.

Thanks for taking the time to read,
Steve