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