jQuery handling hover() and unfinished animations on mouseout

Live Demo with visible code; http://jsfiddle.net/3eEgb/4/

The demo should be fairly self explanatory; I'm finding the length of a sentence inside a wrapper with the overflow hidden, and if it's wider than the wrapper I'm running an animation function that slides it along, revealing the remaining text.

However I'm having problems with the mouseout part of the hover() function. When the user mouses out I'd like the text to snap back to it's starting p开发者_StackOverflow中文版osition.

According to the documentation (http://api.jquery.com/stop/) I should be able to .stop() the animation on the object - but I must be missing some detail because I can't get it to work as documented. If I could get .stop() to function I presume I can chain it with .css() to set margin:0 to move the text back to it's original position.

$(this).stop().css("color", "red"); //This isn't working ARR!

is the source of my frustrations. I've tried all the various ways I could think of to no avail.

Thanks!

You're animating the .width element, but stopping the .track-version element.

Change the mouseleave handler to $(e).find(".width").stop().