How to Play animation on Mouseover and Reverse on Mouseout?

I am trying to create a simple animated navigation bar. I want to mouseover an image and have an animation play, then when you mouseout the animation will play in reverse.

I can get the animation to play on mouseover, but as soon as I put in the mouseout code it doesn't work. I'm completely new to Edge, so if someone can give me a simple explanation on how to play/reverse an animation on mouseover/out, I would really appreciate it.

Right now I have an image, converted to a symbol, with another image (nav_on_1) nested inside. The image nested inside is animated with the label "nav_on_1_play".

My code for mouseover is below:

sym.$("nav_on_1").show();
sym.play("nav_on_1_play");