animated images for navigation bar

I am trying to build a navigation bar that shows an animated gif on hover/click as a backdrop to the text.

For example - I want to have a navigation bar with just 3 links - Home, Catalogues and Contact. When the user scrolls over one of the menus an animated gif(?) or css/jquery animation occurs where a开发者_高级运维 circle grows behind the text and then shrinks again when the mouse scrolls to a different menu (and the same effect occurs on that one).

Has anyone seen anything like this - and is it possible to use an animated gif as a rollover image - the only issue with this is I wouldnt be able to then shrink the circle again when hovered away from the link......

Hope this makes sense and someone can help!!!

Thanks JD

---

You can use jQuery to create special effect by using .hover() and .animate(). You can find a working example here: http://colorpowered.com/blend/

And for the second part of your question. Yes, you can use animated gifs as a rollover image.

---

you can try some jquery plugin like jquery background position and create animation effect by moving the background image, you can try this demo