Jquery Onhover text overlay

I've been working on trying to make a caption overlay an image when rolling over. So far I have been able to create the hover effect, however the fade often glitches making the text that is laying over it lighter and lighter until it is unreadable. Is there any way to fix this? Here is a link to what I've done. Also I was wondering how I could make the background image fade.

geo开发者_运维百科ffjohnsondesign.com/test

Thanks for all the help. I am such a Jquery noob it saddens me.

You should use stop(true, true) to stop the animation and immediately go to the last phase.

I recreated your sample on jsFiddle. Try to see if what used to happen, still happens?

You should call stop(true, true) to stop any queued animations as well, and to set the CSS to the animation's final value.