Question

I have a created a snippet of code that basically animates an h2 onto an image on hover and then off the right on hover off, so i’ve initially set the h2 to be left: -200px off the page on load, then on hover to animate to left: 10px inside the .image and then on hover off to animate to left: 500px to zoom off. Now when I hover the image again the h2 is being animated in from the right, how can I reset the h2 to be -200px as soon as the hover off has happened or can you suggest a better way for me to achieve this effect?

My attempt can be found here http://jsfiddle.net/kyllle/GPve7/

Thanks

Answer 1

Look at the animate function from jquery, it has a callback property, just set the CSS after that:

Updated fiddle