jQuery Knob as a Progress Bar on hover in/out

Question

I'm trying to implement a progress bar (aterrien's jQuery Knob) that can have its progression interrupted on mouseout. I can begin the progression on mouseover, but I cannot interrupt the progression until it's been completed. I'd like to reverse the animation back to the starting point on mouseout, and resume progression from zero again on mouseover.

Any ideas? Thanks in advance, Daniel

(see my example in the comment)

Answer 1

You can call $('.knob').stop() and that will stop any currently running animations on it. It works best when you use .stop() in both the over/out states otherwise it goes a bit wonky after you mouseover/out really fast a few times. I've updated your fiddle here: http://jsfiddle.net/5xah6383/4/